:in-range

版本：CSS3

CSS伪类:in-range代表一个元素，其当前值处于属性min和max限定的范围之内。该伪类可选定任意的,但只有在该元素指定了取值范围，并且元素值处于指定范围时才有效

语法:

E:in-range{sRules}

• :in-range选择器匹配范围内的输入元素，用于标签的值在指定区间值时显示的样式。
• :in-range选择器只作用于能指定区间值的元素，例如元素中的min和max属性。
• :in-range选择器只有在该元素指定了取值范围，并且元素值处于指定范围内时才有效。
• :in-range选择器。浏览器兼容：IE不支持。

input:in-range {background-color: rgba(0, 255, 0, 0.25);}

该伪类用于给用户一个可视化的提示，表示输入域的当前值处于允许范围内。

注意：该伪类仅适用于那些拥有（或可以接受）取值范围设定的元素。若缺少此类设定，元素值就无所谓“in-range”和“out-range”。

:out-of-range

• 定义：针对一个元素type=number，如果其当前值超出属性min和max限定的范围之内，修改样式。
• 触发：只有在该元素指定了取值范围，并且元素值超出指定范围内时才有效。
• 兼容：IE不支持。

浏览器支持

IE不支持:in-range，其余浏览器都支持:in-range

例子

//HTML

values between 1 and 10 are valid.
• your value is

//CSS li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; }

values between 1 and 10 are valid.
• your value is

.demo1 li{list-style: none; margin-bottom: 1em;}.demo1 input{border: 1px solid black;}.demo1 input:in-range{background-color: rgba(0, 255, 0, 0.25);}.demo1 input:out-of-range{background-color: rgba(255, 0, 0, 0.25); border: 2px solid red;}.demo1 input:in-range + label::after{content:'okay.';}.demo1 input:out-of-range + label::after{content:'out of range!';}