: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.
Please take two minutes to fill out our short survey.
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 |