:checked
Correspond à une case cochée, à un bouton radio sélectionné et à l’option choisie dans une liste select.
Exemple
#.switch input {
position: absolute;
opacity: 0;
}
.track {
width: 44px;
padding: 3px;
border-radius: 999px;
background: #3f3f46;
transition: background-color 0.2s;
}
.track::before {
content: "";
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
transition: translate 0.2s;
}
.switch input:checked + .track {
background: #7c3aed;
}
.switch input:checked + .track::before {
translate: 20px 0;
}
.switch input:focus-visible + .track {
outline: 2px solid #a78bfa;
outline-offset: 2px;
}<label class="switch" style="position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;">
<input type="checkbox">
<span class="track"></span>
Mode nuit
</label>Cliquez sur l’interrupteur ou atteignez-le avec la touche Tab et appuyez sur espace. Le véritable champ est invisible, mais il fonctionne toujours.
Définition et utilisation
#La pseudo-classe :checked reflète l’état actuel du contrôle : elle correspond à <input type="checkbox"> et <input type="radio"> quand ils sont cochés, ainsi qu’aux éléments <option> sélectionnés. Elle change en direct, au moment du clic, sans aucun JavaScript.
C’est différent du sélecteur d’attribut [checked]. L’attribut en HTML ne décrit que l’état initial et ne change pas après un clic, alors que :checked montre toujours l’état actuel.
Le contrôle lui-même ne peut être stylisé que de façon limitée, c’est pourquoi :checked s’associe le plus souvent au combinateur de frère suivant (input:checked + label) ou à :has(), pour changer une étiquette, une carte ou toute une ligne. La couleur du champ lui-même se change le plus simplement via accent-color.
Syntaxe
#sélecteur:checked { propriété: valeur; }Utilisations courantes
#- Le texte situé juste après le champ coché. Cliquez sur les champs et observez les étiquettes.
- Toute l’étiquette contenant le champ coché, grâce à
:has(). - Le contrôle lui-même : les champs cochés grossissent et deviennent orange.
- Pour comparer, le sélecteur d’attribut. Le contour rouge reste sur les champs cochés dans le HTML, même après les avoir décochés.
Utilisations courantes en pratique
#input:checked + span
input:checked + span { color: #c4b5fd; font-weight: 700; }label:has(:checked)
:has().label:has(:checked) { background: #7c3aed; color: #fff; }input:checked
input:checked { accent-color: #f59e0b; scale: 1.3; }[checked]
[checked] { outline: 2px dashed #f43f5e; outline-offset: 2px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour changer la couleur de la case elle-même,
accent-colorsuffit. Passez àappearance: noneet à un style personnalisé seulement si vous avez besoin de davantage. - En cachant le véritable champ, n’utilisez pas
display: none. Le champ disparaîtrait alors aussi pour le clavier et les lecteurs d’écran.opacity: 0avec un positionnement suffit. [checked]n’est que l’état initial écrit dans le HTML. Pour réagir aux clics, utilisez toujours:checked.
Entrées associées
#- A + BLe signe + sélectionne l’élément B qui se trouve immédiatement après l’élément A et partage le même parent que lui.
- :has()Sélectionne un élément en fonction de ce qu’il contient ou de ce qui se trouve après lui. Permet de styliser un parent selon ses enfants.
- :disabledCorrespond aux éléments désactivés d’un formulaire, c’est-à-dire ceux qu’on ne peut ni cliquer, ni cocher, ni modifier.
- [attribut]Sélectionne les éléments selon un attribut HTML et sa valeur : exacte, au début, à la fin, un fragment, ou un mot dans une liste.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.