:不确定

基线广泛可用

此功能已成熟，可在许多设备和浏览器版本中使用。它自 2020 年 1 月.

The :indeterminate CSS 伪类代表任何状态不确定的表单元素，例如已设置为 indeterminate 状态的复选框（使用 JavaScript 设置），所有单选按钮均未选中的单选按钮组，以及没有 value 属性的 <progress> 元素。

css

/* Selects any <input> whose state is indeterminate */
input:indeterminate {
  background: lime;
}

此选择器目标的元素是

<input type="checkbox"> 元素，其 indeterminate 属性由 JavaScript 设置为 true
<input type="radio"> 元素，当表单中具有相同 name 值的所有单选按钮均未选中时
<progress> 元素处于不确定状态

语法

:indeterminate

示例

复选框和单选按钮

此示例将特殊样式应用于与不确定表单字段关联的标签。

HTML

html

<fieldset>
  <legend>Checkbox</legend>
  <div>
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">This checkbox label starts out lime.</label>
  </div>
</fieldset>

<fieldset>
  <legend>Radio</legend>
  <div>
    <input type="radio" id="radio1" name="radioButton" value="val1" />
    <label for="radio1">First radio label starts out lime.</label>
  </div>
  <div>
    <input type="radio" id="radio2" name="radioButton" value="val2" />
    <label for="radio2">Second radio label also starts out lime.</label>
  </div>
</fieldset>

CSS

css

input:indeterminate + label {
  background: lime;
}

fieldset {
  padding: 1em 0.75em;
}

fieldset:first-of-type {
  margin-bottom: 1.5rem;
}

fieldset:not(:first-of-type) > div:not(:last-child) {
  margin-bottom: 0.5rem;
}

JavaScript

const inputs = document.getElementsByTagName("input");

for (let i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}

结果

进度条

HTML

html

<progress></progress>

CSS

css

progress {
  margin: 4px;
}

progress:indeterminate {
  width: 80vw;
  height: 20px;
}

结果

规范

规范
HTML 标准 # selector-indeterminate
选择器级别 4 # indeterminate

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

Web 表单 — 使用用户数据
样式化 Web 表单
The <input type="checkbox"> 元素的 indeterminate 属性
<input> 和实现它的 HTMLInputElement 接口。
The :checked CSS selector lets you style checkboxes based on whether they're checked or not