:indeterminate
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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 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
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
Loading…
See also
- Table de compatibilité des propriétés pour les widgets de formulaire
- Mise en forme des formulaires
- La propriété
indeterminate
de l'élément<input type="checkbox">
- L'élément
<input>
et l'interfaceHTMLInputElement
qui l'implémente. - Le sélecteur CSS
:checked
vous permet de mettre en forme les cases à cocher en fonction de leur état (coche ou non)