css校验手机号 |meta 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伪类则用来表示输入框是必填项。

通过以上设置，用户在输入手机号码时，一旦输入格式不正确，就会弹出提示信息，帮助用户校正输入内容，从而增加了用户体验。