:checked
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La pseudo-classe :checked représente n'importe quel bouton radio (<input type="radio">), case à cocher (<input type="checkbox">) ou option (<option> d'un élément <select>) qui est coché ou activé (on). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe :checked ne s'applique plus à l'élément en question.
css
/* cible n'importe quel bouton radio sélectionné, case /* à cocher cochée ou option sélectionnée */ input:checked { margin-left: 25px; border: 1px solid blue; } Note : Les navigateurs considèrent souvent les éléments <option> comme des éléments remplacéset la possibilité de mise en forme avec :checked varie d'un navigateur à l'autre.
Syntaxe
Error: could not find syntax for this item
Exemples
Exemple simple
HTML
html
<div> <input type="radio" name="my-input" id="yes" /> <label for="yes">Oui</label> <input type="radio" name="my-input" id="no" /> <label for="no">Non</label> </div> <div> <input type="checkbox" name="my-checkbox" id="opt-in" /> <label for="opt-in">Cochez-moi !</label> </div> <select name="my-select" id="fruit"> <option value="opt1">Pommes</option> <option value="opt2">Raisins</option> <option value="opt3">Poires</option> </select> CSS
css
div, select { margin: 8px; } /* Libellés pour les entrées cochées */ input:checked + label { color: red; } /* Éléments radio cochés */ input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* Éléments cases à cocher cochés */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* Éléments options sélectionnés */ option:checked { box-shadow: 0 0 0 3px lime; color: red; } Résultat
Spécifications
| Specification |
|---|
| HTML # selector-checked |
| Selectors Level 4 # checked-pseudo |