css怎么判断输入错误 |css 属性大全

input:invalid {
border: 2px solid red;
}

通过这段CSS代码，当用户在输入框中输入错误信息时，边框将变成红色。

另一个方法是使用:focus伪类选择器结合属性选择器来判断输入错误。

input:focus:invalid {
background-color: pink;
}

当用户输入错误信息并让输入框得到焦点时，背景色将变成粉色。

还可以使用JavaScript来判断输入错误并动态添加CSS样式。

var input = document.getElementById("myInput");
if (input.validity.patternMismatch) {
input.classList.add("error");
} 
else {
input.classList.remove("error");
}

这段JavaScript代码将在用户输入信息时检查是否符合指定的模式，如果不符合则添加一个名为“error”的CSS类来改变输入框的样式。

总之，CSS具有非常强大的能力来判断输入错误。无论是使用伪类选择器还是与JavaScript结合使用，都可以让大家更好地控制用户的输入并提高网站的友好度。