:in-range

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

CSS 中的 :in-range 伪选择器在输入元素的值在指定的可接受范围内时匹配这些元素。它是 CSS 选择器级别 4 规范 的一部分,目前处于编辑草案阶段。

<input max="10" min="5" type="number">
input:in-range {
  border: 5px solid green;
}

我相信它只与 input[type=number] 相关。范围输入不允许超出其最小值/最大值的值,并且在任何其他类型的输入上都没有太大意义。也许是带有最大长度的文本输入,但在大多数浏览器中,这些输入的行为是阻止超过最大长度的输入。

演示

就像上面的代码一样,当此输入的值在 5 到 10 之间时,它将具有绿色边框。

浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
53507910.1

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712710.3