网站地图    收藏   

主页 > 专题教程 > css >

:valid

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] CSS :valid伪类选择器用于匹配指定类型的取值有效的input元素。...

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);
}
在线演示

输入数值时有效,输入字母时无效。如果输入的数值在1-10之间也可以被:in-range匹配。:in-range选择器的样式将会覆盖:valid的样式。你可以在下面输入一些数字看看效果。

这是一个email地址输入框。你输入正确的email地址时输入框为绿色,不正确时,输入框为红色。

下面的输入框也是一个email输入框,但是它带有required属性,所以留空时显示为红色。

下面的输入框是一个URL地址输入框。

浏览器支持

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

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论