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,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
53 | 50 | 否 | 79 | 10.1 |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 10.3 |
你总是可以手动赋值,这样它就很有用了 :)
看起来它在Android Firefox上也能工作!
从不知道有这样的东西存在。
我感谢发现了这个。非常有趣。
在示例中(使用FireFox)
10.0000000000000008881784197001252323389053344726…
仍然在范围内(绿色)
但不是
10.00000000000000088817841970012523233890533447266…
那么这个“最大值”到底是什么?
你总是可以(在任何数字上)添加:0.0000000000000008881784197001252323389053344726… 以使其仍然“在范围内”。