css :in-range伪类选择器使用实例分析

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>

在线运行