Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
: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.
Lapseudo-classeCSS: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 DOMindeterminateest fixée àtruevia 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é.
Dans cet article
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" /> <label for="checkbox" >Cette case à cocher commence avec un fond vert.</label > </div></fieldset><fieldset> <legend>Radio</legend> <div> <input type="radio" name="radioButton" value="val1" /> <label for="radio1" >Le premier label radio commence avec un fond vert.</label > </div> <div> <input type="radio" 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;}fieldset { padding: 1em 0.75em;}fieldset:first-of-type { margin-bottom: 1.5rem;}fieldset:not(:first-of-type) > div:not(:last-child) { margin-bottom: 0.5rem;}JavaScript
js
const inputs = document.getElementsByTagName("input");for (const input of inputs) { input.indeterminate = true;}Résultat
Élémentprogress
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
- Table de compatibilité des propriétés pour les widgets de formulaire
- Mise en forme des formulaires
- La propriété
indeterminatede l'élément<input type="checkbox"> - L'élément
<input>et l'interfaceHTMLInputElementqui l'implémente. - Le sélecteur CSS
:checkedvous permet de mettre en forme les cases à cocher en fonction de leur état (coche ou non)