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 相关文章推荐
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 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学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
深入浅析python定时杀进程
2016/06/06 Python
基于Python的关键字监控及告警
2017/07/06 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
python计算日期之间的放假日期
2018/06/05 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
会计专业毕业生自荐信范文
2013/12/20 职场文书
高级编程求职信模板
2014/02/16 职场文书
五四青年节演讲稿
2014/05/26 职场文书
销售员岗位职责
2014/06/09 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS