:indeterminate
:indeterminate
CSS 伪类 表示状态不确定的表单元素:
/* Selects any <input> whose state is indeterminate */ input:indeterminate { background: lime; }
根据上述例子(选择器)选中的元素是:
<input type="checkbox">
元素,其indeterminate
属性被 JavaScript设置为true
。<input type="radio">
元素,表单中拥有相同name
值的所有单选按钮都未被选中时。- 处于不确定状态的
<progress>
元素
语法
Error: could not find syntax for this item
示例
Checkbox & radio button
CSS
input, span {
background: red;
}
:indeterminate, :indeterminate + label {
background: lime;
}
HTML
<div>
<input type="checkbox" id="checkbox">
<label for="checkbox">Background should be green</label>
</div>
<div>
<input type="radio" id="radio">
<label for="radio">Background should be green</label>
</div>
JavaScript
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
inputs[i].indeterminate = true;
}
Progress bar
CSS
progress { margin: 4px; } progress:indeterminate { opacity: 0.5; background-color: lightgray; box-shadow: 0 0 2px 1px red; }
HTML
<progress>
结果
规范
Specification |
---|
HTML Standard # selector-indeterminate |
Selectors Level 4 # indeterminate |
浏览器兼容性
BCD tables only load in the browser