Pseudo Classe CSS :checked

❮ Précédent Suivant ❯

La pseudo-classe CSS :checked est utilisée pour sélectionner des éléments lorsqu'ils sont dans l'état sélectionné. Il est uniquement lié aux éléments <input> (uniquement pour les boutons radio et les cases à cocher) et <option> .

Les éléments radio et les cases à cocher peuvent être activés et désactivés par l'utilisateur.

Version

CSS3

Syntaxe

:checked {
css declarations;
}

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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;
      }
      /* Élément de case à cocher */
      input[type="checkbox"]:checked {
      box-shadow: 0 0 0 3px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de sélecteur :checked</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!

Un autre exemple avec le sélecteur :checked :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>exemple de sélecteur ::checked </h2>
    <input type="checkbox" id="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>[texte]</td>
          <td>[texte]</td>
          <td>[texte]</td>
        </tr>
        <tr class="expandable">
          <td>[plus de texte]</td>
          <td>[plus de texte]</td>
          <td>[plus de texte]</td>
        </tr>
        <tr>
          <td>[texet]</td>
          <td>[texte]</td>
          <td>[textet]</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="toggle" id="btn">Cliquez ici!</label>
  </body>
</html>