:超出范围

Avatar of Sara Cope
Sara Cope

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

CSS 中的 :out-of-range 伪选择器匹配输入元素,当其值超出指定的可接受范围时。

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

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

该选择器在 选择器级别 4 规范 中定义,与其对应项 :in-range 并列。

演示

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

浏览器支持

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

桌面

ChromeFirefoxIEEdgeSafari
53507910.1

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712710.3