: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.
/* 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
:checked
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 |
---|---|---|
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. |
Recommendation | 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
BCD tables only load in the browser