كتيب مرجع CSS

قواعد CSS @

مجموعة الخاصيات CSS

CSS :in-range المحدد

الصيغة CSS الافتراضية in-range تمثل عنصر input، والقيمة الحالية للعنصر تقع ضمن نطاق الحدود المحددة من قبل الخصائص min وmax. ملاحظة: هذه الصيغة تنطبق فقط على العناصر التي تحتوي (أو يمكن أن تتخذ) على إعداد نطاق القيمة. إذا كان يفتقر إلى هذا الإعداد، فإن قيمة العنصر ليست لها معنى كـ "في النطاق" أو "خارج النطاق".

完整CSS选择器参考手册

在线示例

输入的值在指定区间内时，设置指定样式:

示例

!DOCTYPE　html
<html>
<head>
<meta　charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
<style>
input:in-range
{
　　　　border:2px　solid　orange;
}
</style>
</head>
<body>
<h3>:in-range　选择器示例演示。</h3>
<input　type="number"　min="8"　max="18"　value="9"　/>
<p>在input中输入一个值　(小于　8　或者　大于　18),　查看样式的变化。</p>
</body>
</html>

测试看看 ‹/›

定义和使用

:in-range 选择器用于标签的值在指定区间值时显示的样式。

注意： 　:in-range 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性。

浏览器兼容性

表格中的数字表示支持该属性的第一个浏览器版本号。

选择器
:in-range	10.0	不支持	28.0	5.2	11.0

CSS 语法

/*　该伪类可选定任意的<input>,　但只有在该元素指定了取值范围，并且元素值处于指定范围时才有效*/
input:in-range　{
　　background-color:　rgba(0,　255,　0,　0.25);
}

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