CSS3 范围内选择器示例

<style>
input:in-range {
    border: 1px solid blue;
}
</style>

<input type="number" min="10" max="20" value="15">
<p>The border for this value will be blue</p>

当元素的 value 属性在此元素的指定范围限制内时，:in-range CSS 伪类匹配。它允许页面给出反馈，使用该元素当前定义的值在范围限制内。 [1]