Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

: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.

Syntaxe

input:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

Syntaxe formelle

:checked { style properties }

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

Spécifications

Spécification État Commentaires
WHATWG 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.
Candidat au statut de recommandation 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

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) 9.0 9.0 3.1
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 2.1 1.0 (1.0) 9.0 9.5 3.1

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, FredB, tregagnon, teoli, the prisoner
 Dernière mise à jour par : SphinxKnight,