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实现的几个小loading效果
Sep 27 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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+Html+缓存
2006/11/25 PHP
php下使用iconv需要注意的问题
2010/11/20 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
浅谈PHP进程管理
2019/03/08 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
js下用层来实现select的title提示属性
2010/02/23 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Python内置函数及功能简介汇总
2020/10/13 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
工作检讨书怎么写
2014/10/10 职场文书
小学中等生评语
2014/12/29 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js