css3中检验表单的required,focus,valid和invalid样式


Posted in HTML / CSS onFebruary 21, 2014

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
无效,即当填写的内容不符合要求的时候触发。

HTML / CSS 相关文章推荐
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 #HTML / CSS
css3隔行变换色实现示例
Feb 19 #HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 #HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 #HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 #HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 #HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 #HTML / CSS
You might like
ezSQL PHP数据库操作类库
2010/05/16 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
javaScript同意等待代码实现心得
2011/01/01 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
python 异或加密字符串的实例
2018/10/14 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
django和vue实现数据交互的方法
2019/08/21 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
青年创业培训欢迎词
2014/01/10 职场文书
刊首寄语大全
2014/04/11 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
销售会议开幕词
2016/03/04 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书