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,其中包含更多详细信息。数字表示浏览器从该版本及更高版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
53 | 50 | 否 | 79 | 10.1 |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 10.3 |
仅供参考:要测试此功能(以及:in-range示例),您需要从键盘输入超出范围的值或粘贴值。浏览器在使用微调器控件时将强制执行范围。
很高兴知道这一点,但我无法想到任何使用场景。有人能想到吗?
我宁愿使用
min
和max
属性限制用户,或使用范围滑块。