:indeterminate
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 DOMindeterminate
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
BCD tables only load in the browser