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 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
不要在HTML中滥用div
May 08 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
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
PHP学习记录之数组函数
2018/06/01 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
Python正规则表达式学习指南
2016/08/02 Python
python常见的格式化输出小结
2016/12/15 Python
Python异常的检测和处理方法
2018/10/26 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
澳大利亚商务邀请函
2014/01/17 职场文书
小学英语教学反思案例
2014/02/04 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
小学教师个人总结
2015/02/05 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
Python 线程池模块之多线程操作代码
2021/05/20 Python