css required valid和invalid选择器详解
时间:2016-08-08
css required、valid、invalid选择器用于验证表单元素并设置其css样式。本文章向大家介绍required、valid、invalid伪类选择器的使用方法和基本使用实例,需要的朋友可以参考一下。
css required伪类选择器
:required 选择器在表单元素是必填项时设置指定样式。
表单元素可以使用 required 属性来设置必填项。
实例:如果 input 元素设置了 "required" 属性,设置其为黄色。
<!DOCTYPE html>
<html>
<head>
<style>
input:required
{
background-color: yellow;
}
</style>
</head>
<body>
<h3>A demonstration of the :required selector.</h3>
<p>An optional input element:<br><input></p>
<p>A required input element:<br><input required></p>
<p>The :required selector selects form elements with a "required" attribute.</p>
/* http://www.manongjc.com/article/1327.html */
</body>
</html>
css valid伪类选择器
:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。
注意: :valid 选择器只作用于能指定区间值的元素,例如 input 元素中的 min 和 max 属性,及正确的 email 字段, 合法的数字字段等。
实例:如果 input 元素中输入的值为合法的,设置其为黄色。
<!DOCTYPE html>
<html>
<head>
<style>
input:valid
{
background-color: yellow;
}
</style>
</head>
<body>
<h3> :valid 选择器实例演示。</h3>
<input type="email" value="support@exampel.com" />
<p>请输入非法 e-mail 地址,查看样式变化。</p>
</body>
</html>
CSS :invalid伪类选择器
:invalid 选择器用于在表单元素中的值是非法时设置指定样式。
注意: :invalid 选择器只作用于能指定区间值的元素,例如 input 元素中的 min 和 max 属性,及正确的 email 字段, 合法的数字字段等。
实例:如果 input 元素中的值是非法的,设置样式为红色
<!DOCTYPE html>
<html>
<head>
<style>
input:invalid
{
border:2px solid red;
}
</style>
</head>
<body>
<h3> :invalid 选择器实例演示。</h3>
<input type="email" value="supportEmail" />
<p>请输入合法 e-mail 地址,查看样式变化。</p>
</body>
</html>
- ASP.NET AJAX(4)__客户端访问WebService服务器端释放WebService方法客户端访问WebService客户端访问PageMethod错误处理复杂数据类型使用基础客户端代理的
- 讲真,你该做备份的有效性校验了
- memcache安装方法
- 设计模式专题(五)——工厂方法模式
- ASP.NET AJAX(11)__ScriptManagerUpdatePanel的支持成员功能控制成员脚本控件支持成员ScriptMode和ScriptPathLoadScriptsBeforeU
- SQL Server 2016新特性:动态数据屏蔽(DDM)
- ASP.NET AJAX(12)__浏览器兼容功能判断浏览器的类型和版本Sys.Browser针对DOM元素的兼容操作针对DOM事件的兼容操作
- 设计模式专题(六)——原型模式
- ASP.NET AJAX(13)__利用Microsoft AJAX Library开发客户端组件Sys.Component成员Sys.IDisposable成员Sys.INotifyDisposin
- 设计模式专题(七)——建造者模式
- ASP.NET AJAX(14)__UpdatePanel与服务器端脚本控件脚本控件的作用脚本控件的指责Extender模型脚本控件和Extender模型在PostBack中保持状态在UpdatePa
- ASP.NET AJAX(15)__构建高性能ASP.NET AJAX应用UpdatePanel的性能问题使用UpdatePanel的注意事项脚本加载避免脚本阻塞页面显示AjaxControlTool
- LINQ to SQL(1):基础入门
- 设计模式专题(十)——观察者模式
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Python Mock模块原理及使用方法详解
- python实现猜数游戏(保存游戏记录)
- PHP实现简单计算器小程序
- PHP单例模式模拟Java Bean实现方法示例
- php实现每日签到功能
- laravel5实现微信第三方登录功能
- Laravel框架定时任务2种实现方式示例
- tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
- Python 基于jwt实现认证机制流程解析
- Keras – GPU ID 和显存占用设定步骤
- PHP中如何使用Redis接管文件存储Session详解
- 看我一波,Android获取进程名函数,代码优化到极致的操作!
- laravel5使用freetds连接sql server的方法
- opencv 图像滤波(均值,方框,高斯,中值)
- opencv 阈值分割的具体使用