本文章来给大家介绍在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. Oracle 11g R2 常用配置与日志的文件位置

    假设.bash_profile中oracle相关环境变量如下: $ORACLE_HOME=/u01/app/oracle/product/11.2.0/db_1 $ORACLE_BASE=/u01/a ...

  2. [转]利于ThreadLocal管理Hibernate Session

    摘自http://aladdin.iteye.com/blog/40986 在利用Hibernate开发DAO模块时,我们和Session打的交道最多,所以如何合理的管理Session,避免Sessi ...

  3. 【jmeter】JMeter测试MongoDB

    JMeter测试MongoDB性能有两种方式,一种是利用JMeter直接进行测试MongoDB,还有一种是写Java代码方式测试MongoDB性能. 第一种方法 1.编写Java代码,内容如下: pa ...

  4. 【转】七个例子帮你更好地理解 CPU 缓存

    我的大多数读者都知道缓存是一种快速.小型.存储最近已访问的内存的地方.这个描述相当准确,但是深入处理器缓存如何工作的"枯燥"细节,会对尝试理解程序性能有很大帮助. 在这篇博文中,我 ...

  5. php反射机制获取未知类的详细信息

    使用ReflectionClass就可以获取未知类的详细信息 demo: require("hello.php"); $class = new ReflectionClass(&q ...

  6. 求助:为什么我用360浏览器和UC浏览器打不开JAVA中的index.html文件? 一打开就显示浏览器首界页

    如下图,在oracle官网下载了一个JAVA的API文档,双击index.html时打开是浏览器的首页,不知道为什么?请问怎样才能以chm文档格式显示?

  7. boa配置文件详解

    Web服务器boa配置文件参数说明 boa的配置文件是/etc/boa/boa.conf.Port:boa服务器监听的端口,默认的端口是80.如果端口小于1024,则必须是  root用户启动服务器. ...

  8. h264 流、帧结构

    H264元素的分层结构 H.264编码器输出的Bit流中,每个Bit都隶属于某个句法元素.句法元素被组织成有层次的结构,分别描述各个层次的信息. 在H.264 中,句法元素共被组织成  序列.图像.片 ...

  9. Spark on Yarn 架构解析

    . 一.Hadoop Yarn组件介绍: 我们都知道yarn重构根本的思想,是将原有的JobTracker的两个主要功能资源管理器 和 任务调度监控 分离成单独的组件.新的架构使用全局管理所有应用程序 ...

  10. js复习(一)

    一.常用数据框1.alert(""):警告对话框,作用是弹出一个警告对话框 2.confirm(""):确定对话框,弹出一个带确定和取消按钮的对话框--确定返回 ...