css :in-range选择器介绍
css :in-range选择器用于匹配/设置标签的值在指定区间值的样式。
语法：
:in-range {
style properties
}
例如：
input:in-range
{
border:2px solid yellow;
}
上面css表示如果input框的值在设置范围类，那么将应用border:2px solid yellow样式。
:in-range选择器与:out-of-range选择器正好相反。
css :in-range实例
下面是一个使用:in-range选择器和:out-of-range选择器的实例：
<!DOCTYPE HTML>
<html>
<head>
<style>
:in-range {
outline: medium solid green;
}
:out-of-range: {
outline: medium solid red;
}
</style>
</head>
<body>
<form method=\"post\" action=\"http://example.com/form\">
<p>
<label for=\"price\"> $ per unit in your area: <input
type=\"number\" min=\"0\" max=\"10\" value=\"11\" id=\"price\" name=\"price\" />
</label>
</p>
<input type=\"submit\" value=\"Submit\" />
</form>
</body>
</html>
再看一个实例:
<!DOCTYPE html>
<html>
<head>
<style>
input:in-range
{
border:2px solid yellow;
}
</style>
</head>
<body>
<h3>:in-range 选择器实例演示。</h3>
/* http://www.manongjc.com/article/1339.html */
<input type=\"number\" min=\"5\" max=\"10\" value=\"7\" />
<p>在input中输入一个值 (小于 5 或者 大于 10), 查看样式的变化。</p>
</body>
</html>
继续阅读与本文标签相同的文章
-
手机导航是怎样判断路况的？不仅是通过卫星，这几个原因使导航更智能
2026-05-14栏目： 教程
-
手机信号突然从“4G”变成“E”，是什么意思？客服给出答案
2026-05-14栏目： 教程
-
互联网架起“乌镇式生活”
2026-05-14栏目： 教程
-
微信才是内存“杀手”，别再乱清理，关闭这个功能，手机立马流畅
2026-05-14栏目： 教程
-
手机信号变成E是什么意思？看完专业人士给出的解释后，涨知识了
2026-05-14栏目： 教程