--- title: ':checked' slug: 'Web/CSS/:checked' tags: - CSS - Pseudo-classe - Reference translation_of: 'Web/CSS/:checked' ---
{{CSSRef}}

La pseudo-classe :checked représente n'importe quel bouton radio (<input type="radio">), case à cocher (<input type="checkbox">) ou option ({{HTMLElement("option")}} d'un élément {{HTMLElement("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

{{csssyntax}}

Exemples

Ici, on utilise la pseudo-classe :checked pseudo-class applied to hidden checkboxes appended at the beginning of your page could be employed in order to store some dynamic booleans to be used by a CSS rule. The following example shows how to hide/show some expandable elements by simply clicking on a button (download this demo).

CSS

#expand-btn {
    margin: 0 3px;
    display: inline-block;
    font: 12px / 13px "Lucida Grande", sans-serif;
    text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    padding: 3px 6px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    background-color: #969696;
    cursor: default;
    border-radius: 3px;
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
}

#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
    background: #B5B5B5;
    box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
}

#isexpanded, .expandable {
    display: none;
}

#isexpanded:checked ~ * tr.expandable {
    display: table-row;
    background: #cccccc;

}

#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
    display: block;
    background: #cccccc;
}

HTML

<input type="checkbox" id="isexpanded" />

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

<p>[Un texte normal]</p>
<p><label for="isexpanded" id="expand-btn">Afficher les éléments masqués</label></p>
<p class="expandable">[Un texte caché]</p>
<p>[Un texte normal]</p>

Résultat

{{EmbedLiveSample('Exemples','300','450')}}

Spécifications

Spécification État Commentaires
{{SpecName('HTML WHATWG', '#selector-checked', ':checked')}} {{Spec2('HTML WHATWG')}} Aucune modification.
{{SpecName('HTML5 W3C', '#selector-checked', ':checked')}} {{Spec2('HTML5 W3C')}} La sémantique relative au HTML est définie.
{{SpecName('CSS4 Selectors', '#checked', ':checked')}} {{Spec2('CSS4 Selectors')}} Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked')}} {{Spec2('CSS3 Basic UI')}} Lien avec la spécification de niveau 3 pour les sélecteurs.
{{SpecName('CSS3 Selectors', '#checked', ':checked')}} {{Spec2('CSS3 Selectors')}} Définition de la pseudo-classe mais pas de la sémantique associée.

Compatibilité des navigateurs

{{Compat("css.selectors.checked")}}