:invalid | CSS属性参考

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

相关阅读
未经允许不得转载:yiweibang.com易微帮 » :invalid | CSS属性参考
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如有链接无法下载、失效或广告,请联系站长处理!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 如果你也有好模型或者教程,可以到审核区发布,分享有金币奖励和额外收入!
6. 本站提供的模型、教程、施工图等等其他资源,都不包含技术服务 请大家谅解!
7. 如遇到加密压缩包,默认解压密码为yiweibang.com如遇到无法解压的请联系管理员!
分享到:
赞(0)