本文章来给大家介绍在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. Android 中Fragment使用

    Android 中Fragment使用 public class MainActivity extends Activity { public static String[] array = { &q ...

  2. ajax语法

    js语言功能比较强大,但不能访问数据库 ajax来补充这一缺陷 特点:输出不用刷新页面,条件查询数据显示页面上一般不用它,因为需要造很多表格不如用嵌入php代码方式简单 ajax语法: $.ajax( ...

  3. json 解析

    纠结了两天的json数组反序列化,终于在同事的帮助下,找到方法了,特作笔记如下: using Newtonsoft.Json; using Newtonsoft.Json.Linq; using Sy ...

  4. 【原】Centos 7 下创建LVM流程

    阅读目录 个主分区,1个扩展分区] 或 [4个主分区],扩展分区又可以有多个分区:    window常见的分配方式:        方式1:[1个主分区(C盘)+1个扩展分区(包括3个分区,D,E, ...

  5. golang的ssh例子

    package main import ( "github.com/dynport/gossh" "log" ) func MakeLogger(prefix ...

  6. C++ 11中的右值引用以及std::move

    看了很多篇文章,现在终于搞懂了C++ 中的右值以及std::move   左值和右值最重要的区别就是右值其实是一个临时的变量 在C++ 11中,也为右值引用增加了新语法,即&&   比 ...

  7. 【MySQL】数据行长度的一些限制

    今天开发在导入数据的时候报一个错误: Row size too large. The maximum row size for the used table type, not counting BL ...

  8. OAF_MDS系列2_OAF页面的通过MDS多语言开发国际化(案例)

    2014-06-06 Created By BaoXinjian

  9. jstack使用-倒出线程堆栈

    jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项"-J-d64",Windows的jstack使 ...

  10. JAVA类的构造方法

    1,构造方法没有返回类型, 定义: []public] 方法名() {} 2,一个构造方法如果想调用同一类中的另一个构造方法,只能调用一个,并且要放在构造方法第一行 3,用this调用,如 publi ...