CSS :invalid伪类选择器用于匹配指定类型的取值无效的<input>元素。
例如一个email输入框元素（<input type="email">），如果这个输入框中的值为无效的email地址，那么它就可以被:invalid伪类选择器匹配。
在某些浏览器中，如果一个表单<form>元素或<fieldset>元素中有某些字段是无效的值，那么<form>元素和<fieldset>元素也会被:invalid伪类选择器匹配。
当一个数值类型的输入框元素（<input type="number">）指定了最大数值（max）和最小数值（min）时，如果填入的数值超出这个范围之外，那么它可以被:invalid伪类选择器匹配，也可以被:out-of-range伪类选择器匹配。如果在样式表中:out-of-range的规则在:invalid之后，那么后者设置的样式将被:out-of-range设置的样式覆盖。
示例代码
input[type="number"]:invalid {
background-color: tomato;
}
input:invalid {
box-shadow: 0 0 3px 5px rgba(255, 0, 0, .2);
}
在线演示
输入数值时有效，输入字母时无效。如果输入的数值在1-10之外也可以被:out-of-range匹配。:out-of-range选择器的样式将会覆盖:valid的样式。你可以在下面输入一些数字看看效果。
这是一个email地址输入框。你输入正确的email地址时输入框为绿色，不正确时，输入框为红色。
下面的输入框也是一个email输入框，但是它带有required属性，所以留空时显示为红色。
下面的输入框是一个URL地址输入框。
浏览器支持
支持:invalid伪类选择器的浏览器包括：Chrome10+, Firefox4+, Safari5+, Opera10+, Internet Explorer 10+ 以及 iOS。
在Firefox中，如果要使用:invalid来选择一个带有无效字段的表单元素，需要在Firefox13+中才有效。
