1. Web
  2. CSS
  3. :indeterminate

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

:indeterminate

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

La pseudo-classe CSS :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

css
:indeterminate {
  /* ... */
}

Exemples

Case à cocher et bouton radio

Cet exemple applique des styles spéciaux aux étiquettes associées aux champs de formulaire indéterminés.

HTML

html
<fieldset>
  <legend>Case à cocher</legend>
  <div>
    <input type="checkbox" id="checkbox" />
    <label for="checkbox"
      >Cette case à cocher commence avec un fond vert.</label
    >
  </div>
</fieldset>

<fieldset>
  <legend>Radio</legend>
  <div>
    <input type="radio" id="radio1" name="radioButton" value="val1" />
    <label for="radio1"
      >Le premier label radio commence avec un fond vert.</label
    >
  </div>
  <div>
    <input type="radio" id="radio2" name="radioButton" value="val2" />
    <label for="radio2"
      >Le deuxième label radio commence également avec un fond vert.</label
    >
  </div>
</fieldset>

CSS

css
input:indeterminate + label {
  background: lime;
}

JavaScript

js
const inputs = document.getElementsByTagName("input");

for (const input of inputs) {
  input.indeterminate = true;
}

Résultat

Élément progress

HTML

html
<progress></progress>

CSS

css
progress {
  margin: 4px;
}

progress:indeterminate {
  width: 80vw;
  height: 20px;
}

Résultat

Spécifications

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

Compatibilité des navigateurs

See also

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content