:indeterminate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

La pseudo-classe :indeterminate permet de cibler un élément de formulaire dont l'état est indéterminé.

css
/* Cible n'importe quel élément <input> */
/* dans un état indéterminé */
input:indeterminate {
  background: lime;
}

Cela inclut :

  • un élément <input type="checkbox"> dont la propriété du DOM indeterminate est fixée à true via du code JavaScript
  • des éléments <input type="radio"> dont tous les boutons radio du groupe sont décochés
  • des éléments <progress> dans un état indéterminé.

Syntaxe

Error: could not find syntax for this item

Exemples

Case à cocher et bouton radio

CSS

css
input,
span {
  background: red;
}

:indeterminate,
:indeterminate + label {
  background: lime;
}

HTML

html
<div>
  <input type="checkbox" id="checkbox" />
  <label for="checkbox">L'arrière-plan devrait être vert.</label>
</div>
<div>
  <input type="radio" id="radio" />
  <label for="radio">L'arrière-plan devrait être vert.</label>
</div>

JavaScript

js
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}

Résultat

Élément progress

CSS

css
progress:indeterminate {
  opacity: 0.5;
  box-shadow: 0 0 2px 1px red;
}

HTML

html
<progress />

Résultat

Spécifications

Specification
HTML
# selector-indeterminate
Selectors Level 4
# indeterminate-pseudo

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:indeterminate
Applies to <input type="checkbox"> elements
Applies to <progress> elements
Applies to <input type="radio"> elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support