:checked

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.

/* 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

:checked

Exemples

Exemple simple

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

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

Spécification	État	Commentaires
HTML Living Standard La définition de ':checked' dans cette spécification.	Standard évolutif	Aucune modification.
HTML5 La définition de ':checked' dans cette spécification.	Recommendation	La sémantique relative au HTML est définie.
Selectors Level 4 La définition de ':checked' dans cette spécification.	Version de travail	Aucune modification.
CSS Basic User Interface Module Level 3 La définition de ':checked' dans cette spécification.	Recommendation	Lien avec la spécification de niveau 3 pour les sélecteurs.
Selectors Level 3 La définition de ':checked' dans cette spécification.	Recommendation	Définition de la pseudo-classe mais pas de la sémantique associée.

Compatibilité des navigateurs

BCD tables only load in the browser