此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
:indeterminate
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
:indeterminateCSS伪类表示任意的状态不确定的表单元素，例如那些将 HTMLindeterminate 属性设置为true 的复选框，以及属于某个组且该组中所有单选按钮都未选中的单选按钮，还有不确定状态的<progress> 元素。
css
/* 选中任意的状态不确定的 <input> */input:indeterminate { background: lime;}此选择器针对的元素是：
<input type="checkbox">元素，其indeterminate属性被JavaScript 设置为true时。<input type="radio">元素，当表单中具有相同名称值的所有单选按钮均未被选中时。- 处于不确定状态的
<progress>元素
语法
:indeterminate
示例
复选框和单选按钮
这个示例将特殊样式应用于与不确定表单字段关联的标签。
HTML
html
<fieldset> <legend>Checkbox</legend> <div> <input type="checkbox" /> <label for="checkbox">This checkbox label starts out lime.</label> </div></fieldset><fieldset> <legend>Radio</legend> <div> <input type="radio" name="radioButton" value="val1" /> <label for="radio1">First radio label starts out lime.</label> </div> <div> <input type="radio" 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
js
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;}结果
规范
| Specification |
|---|
| HTML # selector-indeterminate |
| Selectors Level 4 # indeterminate-pseudo |
浏览器兼容性
参见
- Web 表单——处理用户数据
- 样式化 Web 表单
<input type="checkbox">元素的indeterminate属性<input>和实现它的HTMLInputElement接口:checkedCSS 选择器可以让你根据复选框是否被选中来设置样式