MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

:indeterminate

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

/* 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

:indeterminate

Exemples

Case à cocher et bouton radio

CSS

input, span {
  background: red;
}

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

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

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

Résultat

Élément progress

CSS

:indeterminate {
  opacity: 0.5;
}

HTML

<progress>

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de ':indeterminate' dans cette spécification.		 Standard évolutif Aucune modification.
HTML5
La définition de ':indeterminate' dans cette spécification.		 Recommendation Définition de la sémantique relative à HTML et des contraintes de validation associées.
Selectors Level 4
La définition de ':indeterminate' dans cette spécification.		 Version de travail Aucune modification.
CSS Basic User Interface Module Level 3
La définition de ':indeterminate' dans cette spécification.		 Candidat au statut de recommandation Définition de la pseudo-classe, sans notion de sémantique associée.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
type="checkbox" (Oui) 3.6 (1.9.2) 9.0 (Oui) 10.60 (2.6) 3.0
<progress> 6.0 6.0 (6.0) 10 (Oui) ? 5.2
type="radio" 39.0 51 (51)[1] Pas de support Pas de support[2] ? Pas de support[3]
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Edge Opera Mobile Safari Mobile
type="checkbox" ? 1.0 (1.9.2) ? (Oui) ? ?
<progress> ? 6.0 (6.0) ? (Oui) ? ?
type="radio" 39.0 51.0 (51.0)[1] Pas de support Pas de support[2] ? Pas de support[3]

[1] Implémentée avec bug 885359.

[2] Cf. Edge bug 7124038

[3] Cf. WebKit bug 156270

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, edspeedy, GeoffreyC., Goofy, tregagnon, louuis, teoli, FredB
 Dernière mise à jour par : SphinxKnight,