css3中检验表单的required,focus,valid和invalid样式
发布时间：2014-02-21 15:40:01 作者：佚名 
我要评论
我要评论HTML5的出现为我们提供一些属性，不用编写js和正则即可解决这个检验表单内容required,focus,valid和invalid样式，感兴趣的朋友可以了解下本文
css3 提示只适用于高级浏览器：
Chrome
Firefox
Safari
IE9+
valid、invalid、required的定义
input:required, input:valid , input:invalid{border:0 none; outline: 0 none; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow: none;}
过去验证表单会通过js和正则去判断填写的内容是否正确，如email的验证。
HTML5的出现为我们提供一些属性，不用编写js和正则即可解决这个检验表单内容。
:required
必须，那input不能为空的意思。
:valid
有效，即当填写的内容符合要求的时候触发。
:invalid
无效，即当填写的内容不符合要求的时候触发。
Chrome
Firefox
Safari
IE9+
valid、invalid、required的定义
复制代码
代码如下:input:required, input:valid , input:invalid{border:0 none; outline: 0 none; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow: none;}
过去验证表单会通过js和正则去判断填写的内容是否正确，如email的验证。
HTML5的出现为我们提供一些属性，不用编写js和正则即可解决这个检验表单内容。
:required
必须，那input不能为空的意思。
:valid
有效，即当填写的内容符合要求的时候触发。
:invalid
无效，即当填写的内容不符合要求的时候触发。
相关文章
本特效是一组效果超酷的表单input输入框聚焦CSS3动画特效效果的代码。这组特效共24种不同的聚焦动画效果，欢迎下载使用2016-04-26CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
之前写了一个登录表单页面，再iphone上测试遇到了一些奇怪的问题：表单中的input[type="submit"]按钮在iPhone的safari浏览器下会出现圆角的情况；input[type="text"]文本输2014-10-11- 一个CSS样式控制和一个META标签即可实现IE提交表单记录历史,点击返回信息仍在，需要的朋友可以参考下2014-05-21
- 注册表单而且还是iphone样式的，怎么样心动了吧，学好css3实现这个效果不是问题，接下来为大家详细介绍下css3如何实现注册表单的样式，感兴趣的你们可不要错过了哈2013-03-20
- 网页制作Webjx文章简介：你是不是觉得自己的主页不够靓丽，想让它有所改变呢？听说过样式表格吗？就是CSS，它就是那个能让你更为准确地控制网页的东东。2009-04-02
CSS实现学生入学毕业档案漂亮表单样式特效源码是一款使用的学生档案记录表单代码，支持提交内容时自动验证手机号和邮箱，所属院校是下拉列表式的可选择，基础水平根入学成2016-06-02
最新评论