:indeterminate

:indeterminate CSS 伪类 表示状态不确定的表单元素:

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

根据上述例子(选择器)选中的元素是:

 

语法

:indeterminate

示例

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 Status Comment
HTML Living Standard
:indeterminate
Living Standard No change
HTML5
:indeterminate
Recommendation Defines the semantic regarding HTML and constraint validation.
Selectors Level 4
:indeterminate
Working Draft No change
CSS Basic User Interface Module Level 3
:indeterminate
Recommendation Defines the pseudo-class, but not the associated semantic.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:indeterminateChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 10Opera Full support YesSafari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
type="checkbox"Chrome Full support 1Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 10.6Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android Full support 1.0
<progress>Chrome Full support 6Edge Full support 12Firefox Full support 6IE Full support 10Opera Full support 15Safari Full support 5.1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 6Opera Android Full support 14Safari iOS Full support 5Samsung Internet Android Full support 1.0
type="radio"Chrome Full support 39Edge No support No
Notes
No support No
Notes
Notes See Edge bug 7124038.
Firefox Full support 51IE No support NoOpera Full support 26Safari No support No
Notes
No support No
Notes
Notes See WebKit bug 156270.
WebView Android Full support 39Chrome Android Full support 39Firefox Android Full support 51Opera Android ? Safari iOS No support No
Notes
No support No
Notes
Notes See WebKit bug 156270.
Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.