css3中定义required,focus,valid和invalid样式

css3中定义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;}

过去验证表单会通过js和正则去判断填写的内容是否正确，如email的验证。

HTML5的出现为我们提供一些属性，不用编写js和正则即可解决这个检验表单内容。
:required
必须，那input不能为空的意思。

:valid
有效，即当填写的内容符合要求的时候触发。

:invalid
无效，即当填写的内容不符合要求的时候触发。

时间： 2024-08-05 03:52:05

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

表单校验的值$valid、$invalid、$pristine和$dirty

angular内置了一套表单校验,其中包含几个状态 ① valid.invalid.pristine和dirty  valid标记表单元素有效:  invalid标记表单元素无效:  pristine表示表单元素是纯净的,用户未操作过:  dirty表示表单元素是已被用户操作过: ② 更改css属性  .ng-pristine {}  .ng-dirty {}  .ng-valid {}  .ng-invalid {} $scope.infoFrom.$setPristine();   //设置

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

[问]在php中定义常量时,const与define的区别? [答]使用const使得代码简单易读,const本身就是一个语言结构,而define是一个函数.另外const在编译时要比define快很多. (1).const用于类成员变量的定义,一经定义,不可修改.define不可用于类成员变量的定义,可用于全局常量. (2).const可在类中使用,define不能. (3).const不能在条件语句中定义常量. 例如: if (...){ const FOO = 'BAR';  // 无效的

css3中的变形（transform）、过渡(transtion)、动画(animation)

Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一起来看看CSS3中transform的旋转rotate.扭曲skew.缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧.是构成transtion和animation的基础. 语法: transform : none | <transform-func

CSS3中REM使用详解

在页面中设置字体,我们知道有常见的两种,px 和 em. px 在Web页面制作中,我们一般使用"px"来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web页面布局被打破,这时就提出了使用"em"来定义Web页面的字体. em 一般都是body的font-size为基准常用写法: 01 02 03 04 05 06 07 0

CSS3中的变形与动画【转】

最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速,性能更好. (下面均没写浏览器前缀,如有需要请自行添加~~) CSS3常见的动画效果的实现,其实主要是靠 transition和 animation . 而通常,这两个又会和CSS3中的新属性transform 来搭配使用 那么这三个东西其实是干什么用的呢?我按我自己的理解来下个简单结论. tran

uCOS-iii 中定义的一些常量

uCOS-iii 中定义的一些常量 uCOS-iii 中有许多宏定义的量,这些量不需要全部记住是什么意思,因为在阅读代码的时候可以选中变量或宏定义然后右键查看定义,就可以知道它代表的什么意思.但是如果知道什么样的变量是大概是什么含义,这样会在阅读代码的时候很流畅.这是我第一天阅读代码的时候遇到的一些宏定义: 第一种是yes和no类型的:常用的TRUE,YES,ENABLE,ACTIVE,VALID,ON,SET,OK都是1的意思,反之则是0: #define DEF_FALSE 0u #defi

CSS3中的动画功能

CSS3中的动画功能分为Transitions功能和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果. 1.Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能.transition属性的用法如下: transition:property duration timing-function; 其中,property表示对哪个属性平滑过渡,取值可以是“background-color”.“color”.“width

css3中变形与动画（一）

css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3中transform注意包括以下几种:旋转(rotate),扭曲(skew),缩放(scale).移动(translate)和矩阵变形matrix. 语法: transform : none | <transform-function> [ <transform-function> ]

CSS3中的弹性流体盒模型技术详解(一)

从这篇文章开始,会利用几个篇幅,我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的(当然,所指的范畴是利用CSS技术). 由于盒子模型技术内容比较多,这篇文章我将着重讲解知识点. 下一篇文章,我会带领大家开发一个兼容 pc端浏览器和 移动端浏览器的弹性布局web界面的实例.希望大家能从中领受到CSS3在布局方面的强大功能. 好了,长话短说,现在开始我们的<CSS3中的弹性流体盒模型技术详解>之旅吧! 在讲解CSS3中新增的弹性布局属性之前,我们先回顾一下CSS1 和 CSS2中都已经定