W3docs
fr
Se connecter

CSS :checked Pseudo-Classe

Utilisez la pseudo-classe CSS :checked pour sélectionner et styliser les éléments <input> et <option>. Exemples pratiques inclus.

La pseudo-classe :checked sélectionne les éléments qui se trouvent actuellement dans l'état coché (sélectionné). Elle s'applique à seulement trois types d'éléments :

  • <input type="checkbox"> lorsque la case est cochée,
  • <input type="radio"> lorsque le bouton radio est sélectionné,
  • les éléments <option> (à l'intérieur d'un <select> ou d'un <datalist>) qui sont actuellement choisis.

Étant donné que ces contrôles sont activés ou désactivés par l'utilisateur, :checked est une pseudo-classe dynamique : les styles définis sous elle ne s'appliquent que lorsque le contrôle est dans l'état actif, et le navigateur les réévalue dès que l'utilisateur clique. Cela en fait le fondement de l'interactivité en CSS seul — vous pouvez créer des bascules, des accordéons, des onglets et des contrôles de formulaire personnalisés sans une seule ligne de JavaScript.

Cette page explique ce que :checked cible, comment le combiner avec des combinateurs de fratrie pour styliser d'autres éléments (c'est ce que font la plupart des utilisations réelles), trois exemples exécutables, et les points d'accessibilité à garder à l'esprit.

Fonctionnement de :checked avec les combinateurs

:checked seul ne peut styliser que le contrôle lui-même, et les cases à cocher/boutons radio natifs sont difficiles à restyliser. La véritable puissance vient de son association avec un combinateur pour qu'un input coché stylise un élément voisin :

  • Frère adjacent (+) — input:checked + label stylise le label qui suit immédiatement un input coché.
  • Frère général (~) — input:checked ~ .panel stylise tout frère ultérieur, permettant à une case à cocher de révéler une section entière.

Un schéma courant consiste à masquer visuellement le vrai input et à laisser l'utilisateur cliquer sur un <label> qui lui est lié (cliquer sur un label bascule le contrôle associé). La case à cocher reste dans l'arbre d'accessibilité, mais vous contrôlez l'aspect visuel via :checked et le label.

Version

HTML Living Standard

HTML5

Selectors Level 4

Syntaxe

Exemple de syntaxe CSS :checked

:checked {
  css declarations;
}

Dans l'exemple suivant, cochez la case pour voir comment cela fonctionne.

Exemple du sélecteur :checked avec la balise <div> :

Exemple de code CSS :checked

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 10px;
        font-size: 20px;
      }
      input:checked + label {
        color: #000;
      }
      input[type="radio"]:checked {
        box-shadow: 0 0 0 4px #8ebf42;
      }
        /* Checkbox element, when checked */
        input[type="checkbox"]:checked {
        box-shadow: 0 0 0 3px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <div>
      <input type="radio" name="my-input" id="yes" />
      <label for="yes">Yes</label>
      <input type="radio" name="my-input" id="no" />
      <label for="no">No</label>
    </div>
    <div>
      <input type="checkbox" name="my-checkbox" id="opt-in" />
      <label for="opt-in">Check!</label>
    </div>
  </body>
</html>
Essayez vous-même »

Exemple du sélecteur :checked avec les balises <table>, <tr>, <th>, <td> :

Exemple CSS :checked imitant un clic

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,tr,th,td {
        border: 1px solid #ccc;
        text-align: center;
        border-collapse: collapse;
        padding: 8px;
      }
      #toggle {
        display: none;
      }
      .expandable {
        visibility: collapse;
        background: #1c87c9;
      }
      #btn {
        display: inline-block;
        margin-top: 15px;
        padding: 10px 20px;
        background-color: #8ebf42;
        color: #fff;
        cursor: pointer;
        border-radius: 3px;
      }
      #toggle:checked ~ * .expandable {
        visibility: visible;
      }
      #toggle:checked ~ #btn {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <input type="checkbox" id="toggle" />
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
        <tr>
          <td>[text]</td>
          <td>[text]</td>
          <td>[text]</td>
        </tr>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
        <tr>
          <td>[text]</td>
          <td>[text]</td>
          <td>[text]</td>
        </tr>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
      </tbody>
    </table>
    <label for="toggle" id="btn">Click here!</label>
  </body>
</html>
Essayez vous-même »

Exemple du sélecteur :checked :

Exemple de la pseudo-classe CSS :checked :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[type=checkbox] {
        vertical-align:middle;
      }
      input[type=checkbox] + label {
        color: #999999;
        font-style: normal;
      } 
      input[type=checkbox]:checked + label {
        color: #8ebf42;
        font-style: italic;
        font-weight:bold;
      } 
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <form>
      <input type="checkbox" id="css" name="css" /> 
      <label for="css">Here is CSS example.</label> 
    </form>
  </body>
</html>
Essayez vous-même »

Ainsi, la pseudo-classe :checked peut être utilisée pour rendre les formulaires plus interactifs et pour créer des widgets avec des inputs masqués et leurs labels visibles.

Cas d'utilisation courants

  • Cases à cocher et boutons radio personnalisés. Masquez le contrôle natif avec appearance: none (ou en le rognant) et dessinez votre propre indicateur qui réagit à input:checked.
  • Panneaux bascule / "voir plus". Une case à cocher masquée associée à :checked ~ .panel { display: block } développe ou réduit le contenu (comme dans l'exemple de tableau ci-dessus) sans JavaScript.
  • Onglets et accordéons en CSS seul. Regroupez les boutons radio par name, puis utilisez input:checked ~ ... pour révéler le panneau correspondant.
  • Stylisation de l'état <option>. option:checked permet de mettre en évidence l'élément actuellement sélectionné dans un <select>.

Accessibilité et points d'attention

  • Gardez l'input focusable. Utilisez appearance: none, le rognage ou opacity: 0 plutôt que display: none si vous souhaitez que les utilisateurs du clavier puissent atteindre et basculer le contrôle. display: none retire l'input de l'ordre de tabulation entièrement.
  • Associez toujours un contrôle à un <label>. Un <label> correctement associé (via for/id) fait du texte visible une cible cliquable et lisible par les lecteurs d'écran pour le contrôle.
  • L'élément stylisé doit être un frère qui vient après l'input. Les combinateurs de fratrie CSS (+, ~) ne regardent qu'en avant, donc placez l'input avant les éléments qu'il contrôle dans le HTML.
  • :checked reflète l'état courant, et non l'attribut HTML. Même un élément sans l'attribut checked correspond à :checked une fois que l'utilisateur le sélectionne, et un élément avec l'attribut cesse de correspondre une fois que l'utilisateur le désélectionne.

Pseudo-classes associées

:checked est souvent combiné avec d'autres pseudo-classes d'état et de formulaire :

  • :disabled — stylise les contrôles avec lesquels l'utilisateur ne peut pas interagir.
  • :required — stylise les champs qui doivent être remplis.
  • :focus et :hover — stylisent les états d'interaction, utiles pour les contrôles personnalisés.
  • :not() — inverse une sélection, par exemple input:not(:checked).

Consultez la liste complète des sélecteurs CSS pour plus de façons de cibler des éléments.

Pratique

Pratique
Quelle est la fonction de la pseudo-classe ':checked' en CSS ?
Quelle est la fonction de la pseudo-classe ':checked' en CSS ?
Was this page helpful?