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 06 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 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、php5的mysql数据库操作类
2008/01/10 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
JS中产生标识符方式的演变
2015/06/12 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
python文件与目录操作实例详解
2016/02/22 Python
详解Python迭代和迭代器
2016/03/28 Python
Python求出0~100以内的所有素数
2018/01/23 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
个人自我鉴定
2013/11/07 职场文书
食堂个人先进事迹
2014/01/22 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
校园安全教育广播稿
2014/02/17 职场文书
公司领导班子对照材料
2014/08/18 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
公司档案管理制度
2015/08/05 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js