本文章来给大家介绍在css3定义required,focus,valid和invalid样式的方法,此方法目前只支持ie9+及ff,gg浏览器哦。
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;
}
/* by http://www.manongjc.com/article/1327.html */

过去验证表单会通过js和正则去判断填写的内容是否正确,如email的验证。
HTML5的出现为我们提供一些属性,不用编写js和正则即可解决这个检验表单内容。
:required
必须,那input不能为空的意思。
:valid
有效,即当填写的内容符合要求的时候触发。
:invalid
无效,即当填写的内容不符合要求的时候触发。

css required,focus,valid和invalid介绍的更多相关文章

  1. css3中定义required,focus,valid和invalid样式

    css3 提示只适用于高级浏览器: ChromeFirefoxSafariIE9+ valid.invalid.required的定义  代码如下 复制代码 input:required, input ...

  2. apt update 提示 Release file for http://… is not valid yet (invalid for another d..)

    由于在公司里需要使用代理上网,搞了好久,好不容易把 apt 整得可以访问外网了,结果在执行 spt update 时总是提示 Release file for http://- is not vali ...

  3. Difference between Satisfiable, Valid, Unsatisfiable & Invalid

    A formula is satisfiable if it is possible to find an interpretation (model) that makes the formula  ...

  4. css:focus伪类的使用

    css中:focus伪类的使用,即给已获取焦点的元素设置样式 示例一 <!DOCTYPE html> <html lang="en"> <head&g ...

  5. CSS中display:block的使用介绍

    在CSS的规定中,每个页面元素都有一个display的属性,用于确定这个元素的类型是行内元素,还是块级元素: (1)行内元素:元素在一行内水平排列,依附于其他块级元素存在,因此,对行内元素设置高度.宽 ...

  6. Javascript动态引用CSS文件的2种方法介绍

    最近做一个项目,需要javascript动态插入样式,结果以前的方法失效了!查了2个小时的原因竟然是自己手贱,这个最后再说! javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现 ...

  7. 【css预处理器】------css预处理器及sass基本介绍------【巷子】

    001.什么是css预处理器? css预处理器定义了一种新的语言.用一种专门的编程语言,为css增加了一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.(通俗点说“” ...

  8. 02.CSS选择器-->:focus

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. css中line-height的理解_介绍line-height实际应用

    一.line-height的定义 css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同.line-height只影响行内元素和其他行内内容,而不会直接影响块级元素,如果块 ...

随机推荐

  1. tomcat如何按站点调试本机程序

    1.配置host host地址:c:\windows\system32\drivers\etc 配置本机域名: # localhost name resolution is handled withi ...

  2. HBase(八): 表结构设计优化

    在 HBase(六): HBase体系结构剖析(上) 介绍过,Hbase创建表时,只需指定表名和至少一个列族,基于HBase表结构的设计优化主要是基于列族级别的属性配置,如下图: 目录: BLOOMF ...

  3. window.open窗口关闭后刷新父窗口代码

    window.open窗口关闭后刷新父窗口代码 window.opener.location.href=window.opener.location.href;window.close();

  4. PEM文件格式详细解析

    PEM文件格式存档 Author:Roson sun sunxiao@tomonline-inc.com Time:2006-4-11 1.  描述: Openssl使用PEM(RFC 1421-14 ...

  5. 【springBoot】springBoot集成redis的key,value序列化的相关问题

    使用的是maven工程 springBoot集成redis默认使用的是注解,在官方文档中只需要2步; 1.在pom文件中引入即可 <dependency> <groupId>o ...

  6. [linux basic 基础]----线程的属性

    在信号量和互斥量例子中,我们都是在程序推出之前利用pthread_join对线程进行再次同步:如果想让thread想创建它的线程返回数据我需要这么做:问题:我们有时候既不需要第二个线程向main线程返 ...

  7. windows初始化后做了哪些事情

    保护视力,将WINDOWS背景色变成淡绿色 绿色和蓝色对眼睛最好,建议大家在长时间用电脑后,经常看看蓝天.绿地,就能在一定程度上缓解视疲劳.同样的道理,如果我们把电脑屏幕和网页的底色变为淡淡的苹果绿, ...

  8. SecureCRT自动记录日志【记录键入的所有命令和打印的结果信息】

  9. kafka_2.11-0.8.2.2的搭建

    一.下载官网的压缩包~ 修改conf/server.properties host.name=10.10.224.12  (修改为主机ip,不然服务器返回给客户端的是主机的hostname,客户端并不 ...

  10. ERP_Oracle Erp R12.2的新技术特点(概念)

    2014-09-09 Created By BaoXinjian