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. heidsoft logo

  2. Winform-控制边框显示属性

  3. Codeforces Round #326 (Div. 2) D. Duff in Beach dp

    D. Duff in Beach Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/588/probl ...

  4. search result

    https://github.com/search?l=java&p=86&q=Floating+window&type=Code&utf8=%E2%9C%93http ...

  5. [Angular 2] *ngFor

    heros.ts: import {Component} from "@angular/core"; const HEROES = [ {id: 1, name:'Superman ...

  6. windows 下的命令行工具。。

    1.powershell window自带..右下角搜索..powershell 2.conemu https://code.google.com/p/conemu-maximus5/wiki/Dow ...

  7. TFS服务器(微软源代码管理服务器)上彻底删除项目

    在TFS服务器上建立了很多项目,发现在Team Explorer中,只能移除团队项目,这种移除,只是将项目从当前Team Explorer项目列表中删除,下一次Connect到TFS服务器时,或者刷新 ...

  8. the railway problem(the example of stack)

    this problem is a very classic problem which can use stack to solve. the problem can be searched thr ...

  9. hdu 3849 (双联通求桥)

    一道简单的双联通求桥的题目,,数据时字符串,,map用的不熟练啊,,,,,,,,,,,,, #include <iostream> #include <cstring> #in ...

  10. 笔记——Function类型 及其 call、apply方法

    每个函数都是Function类型的实例.函数有三种定义方式和两个内部属性arguments和this. 同时函数也是对象,也有属性和方法.本篇主要其call()和apply()方法 属性 length ...