: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 Standard
# selector-indeterminate
Selectors Level 4
# indeterminate

Compatibilité des navigateurs

BCD tables only load in the browser