Pseudo-classe CSS `:checked`

Baseline

Large disponibilité

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.

Voir la compatibilité complète
En savoir plus

La pseudo-classe CSS :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).

Exemple interactif

label {
  display: block;
  margin-top: 0.5em;
}

fieldset {
  margin-top: 0.5em;
}

input:checked {
  border: none;
  outline: 2px solid deeppink;
}

<label for="name">Nom (requis)&nbsp;:</label>
<input id="name" name="name" type="text" required />

<label for="birth">Date de naissance&nbsp;:</label>
<input id="birth" name="birth" type="date" />

<label for="origin"
  >Comment avez-vous entendu parler de nous&nbsp;? (requis)</label
>
<select id="origin" name="origin" required>
  <option value="">Choisissez une option</option>
  <option value="google">Google</option>
  <option value="facebook">Facebook</option>
  <option value="advertisement">Publicité</option>
</select>

<fieldset>
  <legend>Méthode de contact privilégiée&nbsp;:</legend>
  <label>
    <input name="contact" type="radio" value="email" checked /> Courriel
  </label>
  <label><input name="contact" type="radio" value="phone" /> Téléphone</label>
</fieldset>

<label>
  <input name="newsletter" type="checkbox" checked /> Je souhaite m'abonner à
  une lettre d'information personnalisée.
</label>
<label>
  <input name="privacy" type="checkbox" required /> J'ai lu et j'accepte la
  Politique de confidentialité (obligatoire).
</label>

L'utilisateur·ice 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.

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

css

:checked {
  /* … */
}

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

Basculer des éléments à l'aide d'une case à cocher masquée

Cet exemple utilise la pseudo-classe :checked pour permettre à l'utilisateur·ice de basculer le contenu en fonction de l'état d'une case à cocher, le tout sans utiliser JavaScript.

HTML

html

<input type="checkbox" id="expand-toggle" />

<table>
  <thead>
    <tr>
      <th>Colonne #1</th>
      <th>Colonne #2</th>
      <th>Colonne #3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="expandable">
      <td>[plus de texte]</td>
      <td>[plus de texte]</td>
      <td>[plus de texte]</td>
    </tr>
    <tr>
      <td>[contenu de cellule]</td>
      <td>[contenu de cellule]</td>
      <td>[contenu de cellule]</td>
    </tr>
    <tr>
      <td>[contenu de cellule]</td>
      <td>[contenu de cellule]</td>
      <td>[contenu de cellule]</td>
    </tr>
    <tr class="expandable">
      <td>[plus de texte]</td>
      <td>[plus de texte]</td>
      <td>[plus de texte]</td>
    </tr>
    <tr class="expandable">
      <td>[plus de texte]</td>
      <td>[plus de texte]</td>
      <td>[plus de texte]</td>
    </tr>
  </tbody>
</table>

<label for="expand-toggle" id="expand-btn">Basculer les lignes masquées</label>

CSS

css

/* Masquer la case à cocher de basculement */
#expand-toggle {
  display: none;
}

/* Masquer le contenu extensible par défaut */
.expandable {
  visibility: collapse;
  background: #dddddd;
}

/* Style du bouton */
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ffff77;
  border: 1px solid;
  border-radius: 3px;
}

/* Afficher le contenu masqué lorsque la case à cocher est cochée */
#expand-toggle:checked ~ * .expandable {
  visibility: visible;
}

/* Style du bouton lorsque la case à cocher est cochée */
#expand-toggle:checked ~ #expand-btn {
  background-color: #cccccc;
}