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实现自定义滚动条代码分享
Aug 18 HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
css3 filter属性的使用简介
Mar 31 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
深入了解php4(1)--回到未来
2006/10/09 PHP
实用函数4
2007/11/08 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Django 多环境配置详解
2019/05/14 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
全球性的女装店:storets
2019/06/12 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
学习保证书100字
2015/02/26 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
工资证明范本
2015/06/12 职场文书
小学同学聚会感言
2015/07/30 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android