css required,focus,valid和invalid介绍
本文章来给大家介绍在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介绍的更多相关文章
- css3中定义required,focus,valid和invalid样式
css3 提示只适用于高级浏览器: ChromeFirefoxSafariIE9+ valid.invalid.required的定义 代码如下 复制代码 input:required, input ...
- apt update 提示 Release file for http://… is not valid yet (invalid for another d..)
由于在公司里需要使用代理上网,搞了好久,好不容易把 apt 整得可以访问外网了,结果在执行 spt update 时总是提示 Release file for http://- is not vali ...
- Difference between Satisfiable, Valid, Unsatisfiable & Invalid
A formula is satisfiable if it is possible to find an interpretation (model) that makes the formula ...
- css:focus伪类的使用
css中:focus伪类的使用,即给已获取焦点的元素设置样式 示例一 <!DOCTYPE html> <html lang="en"> <head&g ...
- CSS中display:block的使用介绍
在CSS的规定中,每个页面元素都有一个display的属性,用于确定这个元素的类型是行内元素,还是块级元素: (1)行内元素:元素在一行内水平排列,依附于其他块级元素存在,因此,对行内元素设置高度.宽 ...
- Javascript动态引用CSS文件的2种方法介绍
最近做一个项目,需要javascript动态插入样式,结果以前的方法失效了!查了2个小时的原因竟然是自己手贱,这个最后再说! javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现 ...
- 【css预处理器】------css预处理器及sass基本介绍------【巷子】
001.什么是css预处理器? css预处理器定义了一种新的语言.用一种专门的编程语言,为css增加了一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.(通俗点说“” ...
- 02.CSS选择器-->:focus
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css中line-height的理解_介绍line-height实际应用
一.line-height的定义 css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同.line-height只影响行内元素和其他行内内容,而不会直接影响块级元素,如果块 ...
随机推荐
- 服饰行业淘宝商城店铺首页设计报告-转载自http://bbs.paidai.com/topic/88363
店铺的设计 和 美工是2个完全不同的工作. 很多中小卖家,往往会模糊他们之间的差别. 好比要建造一座金茂大厦,先要有建筑设计师设计图纸,明确好建造的楼层数,具体框架结构,所用材料等等. 然后建筑施工队 ...
- jquery中关于append()的用法笔记---append()节点移动与复制之说
jquery中关于append()的用法笔记---append()节点移动与复制之说 今天看一本关于jquery的基础教程,看到其中一段代码关于append()的一行,总是百思不得其解.于是查了查官方 ...
- IOS开发-cell的动态高度
tableView中自定义cell的高度随子控件的内容动态变化,也是用的非常多的地方.现在就来处理一个自定义一个里面有文字(多少不定),图片(有无不定)的cell 首先要准备两个模型,一个是存放数据的 ...
- Object-c-数组的使用
一.数组: 1.数组初始化: a.NSArray *array = [[NSArray alloc] init]; b.NSArray *array = [[NSArray array]; 2.初始化 ...
- js为DIV动态设置id属性
<script> var objs=document.getElementById("iproduct").getElementsByTagName("div ...
- android学习笔记11——ScrollView
ScrollView——滚动条 用于内容显示不全,可提供滚动条下来形式,显示其余内容. ScrollView和HorizontalScrollView是为控件或者布局添加滚动条 特点如下: 1.只能有 ...
- FindViewByMe插件
FindViewByMe 是一个自动生成 FindViewById 代码的 IDEA/Android Studio 插件, 支持 Activity.Fragment 和 ViewHolder 中的 f ...
- OC知识点
1.@autoreleasepool why1 2.retain O-C内存管理和点语法1>OC内存管理正常情况要使用大量的retain和relrese操作2>点语法可以减少使用retai ...
- sudo gem install cocoapods
在使用IOS_BaiduSDK的时候,需要用到cocoapods,所以就需要按照步骤继续着.但是在过程中会遇到一些问题: 1. sudo gem install cocoapods 运行这个报错 Ru ...
- NeHe OpenGL教程 第三十四课:地形
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...