DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
:不确定
是 CSS 中的伪类选择器,以既不选中也不取消选中的状态命名。 它是介于“是”和“否”选项之间的“也许”状态。 状态尚未完全确定,因此得名:不确定。
不确定复选框
我们可能会在表单中的复选框中看到它最常使用的地方

在深入研究如何在 CSS 中选择它之前,关于 :不确定
在复选框中的使用有一些奇怪的地方需要注意。
它不能在 HTML 中设置
首先,在 HTML 中无法将复选框设置为不确定状态。 在上面的开头示例中,我们能够通过在 HTML 中显式说明来将第二个复选框设置为选中状态。
<!-- This is checked by default -->
<input type="checkbox" checked="">
很自然地会假设我们可以对不确定状态做同样的事情。
<!-- This does not work! -->
<input type="checkbox" indeterminate="">
但遗憾的是,事实并非如此,因此请不要在您的代码中使用最后一个示例。
在撰写本文时,Javascript 是在复选框上设置不确定状态的唯一方法。 实现此目标的一种方法是按 ID 选择特定复选框
var checkbox = document.getElementById("some-checkbox");
checkbox.indeterminate = true;
上面示例的限制是,复选框一旦更改为另一个状态,就永远无法恢复到不确定状态。 相反,我们可以在选中、取消选中和不确定状态之间循环
<!-- Inline click handler, just for demo -->
<input type="checkbox" id="demo" onclick="toggle(this)">
function toggle(demo) {
if (demo.readOnly) demo.checked=demo.readOnly=false;
else if (!demo.checked) demo.readOnly=demo.indeterminate=true;
}
查看 CodePen 上 Geoff Graham (@geoffgraham) 创建的 旋转复选框状态。
它纯粹是视觉状态
复选框仍然只计算它是否已选中或取消选中,无论我们是否激活了不确定状态。 换句话说,不确定会掩盖复选框的实际值,并且不计为自身的价值。
它的默认外观在浏览器之间不一致
像数字输入一样,不确定状态在每个浏览器中的样式都不一致。

但是,总的来说,以下是对不确定复选框的支持。
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
28 | 3.6 | 6 | 12 | 6 |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 4.4 | 12.2-12.5 |
不确定单选按钮
:不确定
可以应用于单选按钮组级别,如果未选择任何选项,则整个组被视为处于不确定状态。
查看 CodePen 上 Geoff Graham (@geoffgraham) 创建的 不确定单选按钮。
我们应该注意到,使用 :不确定
可能不是最佳选择,因为它会影响用户体验。
不确定进度条
我们还可以将 :不确定
应用于 <progress></progress>
元素,其中在 HTML 中未明确设置任何值。 无需 Javascript,但为 <progress></progress>
元素设置样式本身就是一件 很棘手的事情,需要大量工作并考虑跨浏览器一致性。
查看 CodePen 上 Geoff Graham (@geoffgraham) 创建的 不确定进度元素。
浏览器支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
39 | 51 | 11 | 79 | 10.1 |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 10.3 |