:invalid | CSS属性参考

1,113次阅读
没有评论

共计 949 个字符,预计需要花费 3 分钟才能阅读完成。

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+ 中才有效。

相关阅读
正文完
 0