La pseudo-classe :indeterminate permet de cibler 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

progress:indeterminate {
  opacity: 0.5;
  box-shadow: 0 0 2px 1px red;
}

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.
Recommendation Définition de la pseudo-classe, sans notion de sémantique associée.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
type="checkbox"Chrome ? Edge Support complet OuiFirefox Support complet 3.6IE Support complet 9Opera Support complet 10.6Safari Support complet 3WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?
type="radio"Chrome Support complet 39Edge Aucun support Non
Notes
Aucun support Non
Notes
Notes See Edge bug 7124038.
Firefox Support complet 51IE Aucun support NonOpera ? Safari Aucun support Non
Notes
Aucun support Non
Notes
Notes See WebKit bug 156270.
WebView Android Support complet 39Chrome Android ? Edge Mobile Aucun support Non
Notes
Aucun support Non
Notes
Notes See Edge bug 7124038.
Firefox Android Support complet 51Opera Android ? Safari iOS Aucun support Non
Notes
Aucun support Non
Notes
Notes See WebKit bug 156270.
Samsung Internet Android ?
<progress>Chrome Support complet 6Edge Support complet OuiFirefox Support complet 6IE Support complet 10Opera ? Safari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 6Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Étiquettes et contributeurs liés au document

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