1. Web
  2. CSS
  3. Référence CSS
  4. Selectors
  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