E:in-range伪类选择器与E:out-of-range伪类选择器
E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），且实际输入值在该范围内时使用的样式。
E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），但实际输入值在该范围之外时使用的样式。
代码清单19-27为一个E:in-range伪类选择器与E:out-of-range伪类选择器的使用示例。示例页面中包含一个数值输入控件（type属性值为number的input元素），通过min属性值与max属性值限定元素内的有效输入数值为从1到100,通过E:in-range伪类选择器指定元素内的输入值在该范围内时元素背景色为白色，通过E:out-of-range伪类选择器指定元素内的输入值在该范围之外时元素背景色为红色。
代码清单19-27 E:in-range伪类选择器与E:out-of-range伪类选择器的使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>http://www.manongjc.com/article/1339.html</title>
<style type="text/css">
input[type="number"]:in-range{
background-color: white;
}
input[type="number"]:out-of-range{
background-color: red;
}
</style>
</head>
<body>
<form>
http://www.manongjc.com/article/1340.html
请输入1到100之内的数值：<input type=number min=0 max=100 >
</form>
</body>
</html>
E:in-range伪类选择器与E:out-of-range伪类选择器的更多相关文章
- 突破css选择器的局限，实现一个css地址选择器?
首先看一个效果,注意地址栏的变化 然后思考一下,用css如何实现? css选择器的局限 选择器是css中的一大特色,用于选择需要添加样式的元素. 选择器的种类有很多,比如 元素选择器 p {color ...
- 【Java基础之Object类（一）】Java中Object类中的所有方法（toString、equals、hashCode、clone、finalize、wait和notify等）详解（转载）
java中的hashcode.equals和toString方法都是基类Object的方法. 首先说说toString方法,简单的总结了下API说明就是:返回该对象的字符串表示,信息应该是简明但易于读 ...
- c#中@标志的作用 C#通过序列化实现深表复制 细说并发编程-TPL 大数据量下DataTable To List效率对比 【转载】C#工具类：实现文件操作File的工具类 异步多线程 Async .net 多线程 Thread ThreadPool Task .Net 反射学习
c#中@标志的作用 参考微软官方文档-特殊字符@,地址 https://docs.microsoft.com/zh-cn/dotnet/csharp/language-reference/toke ...
- 第六种方式，python使用cached_property缓存装饰器和自定义cached_class_property装饰器，动态添加类属性（三），selnium webdriver类无限实例化控制成单浏览器。
使用 from lazy_object_proxy.utils import cached_property,使用这个装饰器. 由于官方的行数比较少,所以可以直接复制出来用自己的. class cac ...
- java异常处理：建立exception包，建立Bank类，类中有变量double balance表示存款,Bank类的构造方法能增加存款，Bank类中有取款的发方法withDrawal(double dAmount),当取款的数额大于存款时,抛出InsufficientFundsException,取款数额为负数，抛出NagativeFundsException,如new Bank(100),
建立exception包,建立Bank类,类中有变量double balance表示存款,Bank类的构造方法能增加存款,Bank类中有取款的发方法withDrawal(double dAmount ...
- 12 哈希表相关类——Live555源码阅读(一)基本组件类
12 哈希表相关类--Live555源码阅读(一)基本组件类 这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 ...
- 10 DelayQueue 延时队列类——Live555源码阅读(一)基本组件类
这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 www.cnblogs.com/oloroso/ 本文由乌合 ...
- 8 延时队列相关类——Live555源码阅读(一)基本组件类
这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 http://www.cnblogs.com/oloroso ...
- 4 Handler相关类——Live555源码阅读(一)基本组件类
这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. Handler相关类概述 处理程序相关类一共有三个,其没有派生继承关系,但是其有友元关系和使用关系 ...
- Java基础详解 （一）Java的类成员访问权限修饰词（以及类访问权限）
在一个类的内部,其成员(包括成员变量和成员函数)能否被其他类所访问,取决于该成员的修饰词.Java的类成员访问权限修饰词有四类:private,无(默认情况下),protected和public.其权 ...
随机推荐
- Rhel6-cacti+nagios+ganglia(nginx)配置文档
(lnmp平台) 系统环境: rhel6 x86_64 iptables and selinux disabled 主机: 192.168.122.185 server85.example.com 1 ...
- Java Web项目 配置 ueditor心得
近期的JAVA项目,由于客户要求需要引入富文本编辑器. 参考了两款插件,一款是ckeditor,一款是ueditor. ckeditor在上传文件的时候必须配合ckfinder使用,而ckfinder ...
- Java数据结构和算法之递归
四.递归 递归是函数调用自身的一种特殊的编程技术,其应用主要在以下几个方面: 阶乘 在java当中的基本形式是: Public void mothed(int n){//当满足某条件时: Mo ...
- hadoop删除节点。
hadoop节点摘除操作: 1.确定exclude文件的位置. <property> <name>dfs.hosts.exclude</name> <valu ...
- 关于路径的使用，assi下载和
直接给一个路径下载图片,这函数直接使用assi -(void)downloadWithURL:(NSString*)RequestUrl SavePath:(NSString*)savepath wi ...
- Python UDP broadcast PermissionError: [Errno 13] Permission denied
/********************************************************************** * Python UDP broadcast Permi ...
- linux与windows的不同
linux 严格区分大小写:linux 所有内容都以文件形式保存,包括用户和硬件:linux 不以文件后缀名来区分文件类型:但有一些便于管理员区分文件类型的约定俗称的后缀:windows下的程序不能直 ...
- 记录几款不错的chrome主题
虽然不是一个主题控,但是浏览器无疑是每天使用最多的工具.而在MAC底下,大多数程序边框都是银灰色的,窗口多了就难以有效区分. 所以精挑细选了几款,要求是标签要容易辨识,简洁而不花哨. 不推荐太固定的风 ...
- JS和JQuery总结
目录目录 2js部分一.词法结构 1.区分大小写 2.注意 // 单行 /* 多行注释 */ 3.字面量(直接量 literal) 12 / ...
- RabbitMQ 安装
Install Erlang from the Erlang Solutions repository or Follow the instructions under "Installat ...