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
无效，即当填写的内容不符合要求的时候触发。

 

css3中定义required,focus,valid和invalid样式的更多相关文章

  1. css required,focus,valid和invalid介绍

    本文章来给大家介绍在css3定义required,focus,valid和invalid样式的方法,此方法目前只支持ie9+及ff,gg浏览器哦.css3 提示只适用于高级浏览器:ChromeFire ...

  2. 在CSS中定义【导航栏】超链接样式

    1.案例css代码 <style> .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标 ...

  3. html5 css3中的一些笔记

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title> ...

  4. 在php中定义常量时,const与define的区别?

    问]在php中定义常量时,const与define的区别?  [答]使用const使得代码简单易读,const本身就是一个语言结构,而define是一个函数.另外const在编译时要比define快很 ...

  5. PHP中定义常量的几种方式与区别

    [问]在php中定义常量时,const与define的区别? [答]使用const使得代码简单易读,const本身就是一个语言结构,而define是一个函数.另外const在编译时要比define快很 ...

  6. CSS3中的动画

    CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...

  7. 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

    妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...

  8. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  9. img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover

    img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover <!DOCTYPE html> <html ...

随机推荐

  1. BW性能优化

    少写例程,减少ABAP处理时间,例程要有效率减少查询数据库表先加载主数据,然后加载事务数据创建聚集进行数据压缩M:N关系的数据不能放到一个维度减少计算指标数量,提高上载效率并行加载建模型时如果有日的分 ...

  2. thinkphp分配数组

    TestAction.class.php 的edit方法中 $this->assign('list',array('one'=>'a','two'=>'b')); 后,在edit.h ...

  3. 解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader

    上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,可是又非经常常使用的样例:把一张图片做成圆角矩形 例3:圆角矩形Shader 好吧我承认在做这个样例的时候走了不少弯路,因 ...

  4. SHELL 详解

    http://blog.csdn.net/vah101/article/details/6173488 ( a=2;b=4;c=9; ) 子shell 环境 { a=2;b=4;c=9; } 当前sh ...

  5. c#线程问题(1)

    delegate : public delegate void ParameterizedThreadStart(Object obj) public delegate void ThreadStar ...

  6. 一个坐标点围绕任意中心点旋转--C#实现

    假设对图片上任意点(x,y),绕一个坐标点(rx0,ry0)逆时针旋转RotaryAngle角度后的新的坐标设为(x', y'),有公式: x'= (x - rx0)*cos(RotaryAngle) ...

  7. qsort,mergesort,插入排序

    //插入排序 int a[n]; ;i<=n;i++) { int s=a[i]; ; while(j&&a[j]>a[i]) { a[j+]=a[j]; j--; } a ...

  8. Android（java）学习笔记77：网络编程的概述

    计算机网络 是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统,网络管理软件及网络通信协议的管理和协调下,实现资源共享和信息传递的计算机系统. 网络编程 就 ...

  9. s实现指定时间自动跳转到某个页面

    --js实现指定时间自动跳转到某个页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  10. 物理CPU、物理核跟逻辑核的区分

    一般来说,物理CPU个数×每颗核数就应该等于逻辑CPU的个数,如果不相等的话,则表示服务器的CPU支持超线程技术 ,所以您的电脑是双核的. 一 概念① 物理CPU 实际Server中插槽上的CPU个数 ...