:不确定

Avatar of Geoff Graham
Geoff Graham

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,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
283.66126

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271274.412.2-12.5

不确定单选按钮

:不确定 可以应用于单选按钮组级别,如果未选择任何选项,则整个组被视为处于不确定状态。

查看 CodePen 上 Geoff Graham (@geoffgraham) 创建的 不确定单选按钮

我们应该注意到,使用 :不确定 可能不是最佳选择,因为它会影响用户体验。

不确定进度条

我们还可以将 :不确定 应用于 <progress></progress> 元素,其中在 HTML 中未明确设置任何值。 无需 Javascript,但为 <progress></progress> 元素设置样式本身就是一件 很棘手的事情,需要大量工作并考虑跨浏览器一致性。

查看 CodePen 上 Geoff Graham (@geoffgraham) 创建的 不确定进度元素

浏览器支持

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

桌面

ChromeFirefoxIEEdgeSafari
3951117910.1

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712710.3

更多信息