1. Web
  2. CSS
  3. Référence
  4. Sélecteurs
  5. :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