CSS校驗手機號碼是網頁設計的一個重要內容。本文將介紹如何使用CSS來校驗手機號碼。

input[type="tel"]:valid { 
color: green;
}
input[type="tel"]:invalid { 
color: red;
}

在上面的代碼中，我們首先使用了一個CSS選擇器‘input[type="tel"]’來選取所有type為tel的輸入框。然后，在這些輸入框中，我們使用:valid和:invalid偽類來設置它們的樣式。

當輸入的手機號碼格式正確時，即為valid狀態，我們將字體顏色設置為綠色。當輸入的手機號碼格式不正確，即為invalid狀態時，我們將字體顏色設置為紅色。

為了更加準確地校驗手機號碼，我們可以使用CSS偽類來限制手機號碼的輸入格式。

input[type="tel"]:invalid {
border: 2px solid red;
}
input[type="tel"]:invalid:empty:before {
content: "請輸入手機號碼！";
color: red;
}
input[type="tel"]:invalid:required:before {
content: "請輸入正確格式的手機號碼！";
color: red;
}

在上面的代碼中，我們首先將所有格式不正確的輸入框的邊框顏色設置為紅色，以便用戶明確看到哪些輸入框需要糾正。然后，我們使用:before偽類來添加提示信息。其中:empty偽類用來表示輸入框為空格或空值，:required偽類則用來表示輸入框是必填項。

通過以上設置，用戶在輸入手機號碼時，一旦輸入格式不正確，就會彈出提示信息，幫助用戶校正輸入內容，從而增加了用戶體驗。