CSS :valid伪类选择器用于匹配指定类型的取值有效的<input>元素。

例如一个email输入框元素（<input type="email">），如果这个输入框中的值为有效的email地址，那么它就可以被:valid伪类选择器匹配。

当一个数值类型的输入框元素（<input type="number">）指定了最大数值（max）和最小数值（min）时，如果填入的数值在这个范围之内，那么它可以被:valid伪类选择器匹配，也可以被:in-range伪类选择器匹配。如果在样式表中:in-range的规则在:valid之后，那么后者设置的样式将被:in-range设置的样式覆盖。

示例代码

input[type="number"]:valid {
    background-color: lightgreen;
}                   

input:valid {
    box-shadow: 0 0 3px 5px rgba(0, 200, 0, .2);
}

在线演示

浏览器支持

支持:valid伪类选择器的浏览器包括：Chrome10+, Firefox4+, Safari5+, Opera10+, Internet Explorer 10+ 以及 iOS。