CSS :in-range和:out-of-range的用法

在 CSS 中，:in-range 伪类和 :out-of-range 伪类与 min 属性和 max 属性密切相关，因此这两个伪类常用来匹配 number 类型的输入框或 range 类型的输入框。

例如：

<input type="number" min="1" max="100">
<input type="range" min="1" max="100">

即输入框的最小值是 1，最大值是 100。此时，如果输入框的值不在这个范围内，则 :out-of-range 伪类匹配；如果输入框的值在这个范围内，则 :in-range 伪类匹配，测试 CSS 代码如下：

input:in-range { outline: 2px dashed green; }
input:out-of-range { outline: 2px solid red; }

此时输入框为绿色虚线轮廓，如图 1 所示。

图 1 虚线轮廓示意

如果我们使用 JavaScript 改变输入框的值为 200（超过 max 属性值），或者直接设置 value 属性值为 200，如下：

<input type="number" min="1" max="100" value="200">
<input type="range" min="1" max="100" value="200">

则最终的输入框表现为：:out-of-range 伪类匹配 number 类型的输入框，表现为红色实线轮廓，而 range 类型的输入框依然是绿色虚线轮廓，如下图所示。

图 2 实线轮廓和虚线轮廓示意

这是因为浏览器对 range 类型的输入框自动做了区域范围限制（因为涉及滑杆的定位），无论是 Chrome 浏览器还是 Firefox 浏览器，都是这种表现。例如：

range.value = 200;
// 输出结果是'100'
console.log(range.value);

因此，实际开发的时候，并不存在需要使用范围验证伪类匹配 range 类型输入框的场景，因为范围验证伪类一定会匹配。有必要使用范围验证伪类匹配的场景包括数值输入框和时间相关输入框，如下：

<!-- 数值类型 -->
<input type="number">
<!-- 时间类型 -->
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="time">

如果这类输入框没有 min 属性和 max 属性的限制，则 :in-range 伪类和 out-of-range 伪类都不会匹配。但 Chrome 浏览器下有一个特殊情况，那就是如果 value 属性值的类型和指定的 type 属性值的类型不匹配，:in-range 伪类会匹配这个输入框。例如：

<input type="number" value="a">

匹配证据如下图所示。

图 3 :in-range伪类匹配不合法属性值证据

不过在实际开发中很少使用 :in-range 伪类，而较多使用 :out-of-range 伪类，同时大家也不会故意设置不合法的数值，因此对于这种细节了解即可。

此外，:out-of-range 伪类还可以配合 :invalid 伪类验证细化输入框信息出错时的提示信息。例如：

.valid .cs-input:out-of-range + .cs-valid-tips::before {
   content: "超出范围限制";
   color: red;
}

注意，IE 浏览器不支持 :in-range 伪类和 :out-of-range 伪类。

CSS :in-range和:out-of-range的用法

推荐阅读