:checked - Sélecteur CSS

:checked

Résumé des caractéristiques du sélecteur :checked

Description rapide
Pseudo-classe désignant les cases à cocher (ou boutons radio) qui sont cochés, ainsi que les éléments de menu sélectionnés.
Statut
Standard
Module W3C
Sélecteurs
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)

Description de la pseudo-classe :checked.

La pseudo-classe :checked désigne les boutons radio sélectionnés, les cases à cocher cochées, et les éléments de menu sélectionnés.

Les boutons radio et les cases à cocher sont sélectionnés par défaut lorsque l'attribut checked est présent dans le code. Les éléments de menu le seront si l'attribut selected est présent. Mais bien entendu l'utilisateur peut changer l'état de chacun de ces éléments : la pseudo-classe :checked est un sélecteur dynamique.

Remarque : pour désigner les éléments non sélectionnés, utilisez le sélecteur :not(:checked).

Exemples d'utilisation de la pseudo-classe :checked.

Dans l'exemple ci-dessous, les éléments sélectionnés ou cochés sont entourés d'un contour vert, et/ou sur un arrière-plan de couleur jaune. Suivant le type d'élément, ces deux attributs seront affichés ou seulement l'un des deux. Par exemple les éléments de menu n'acceptent pas de contour.

Les éléments non sélectionnés ont un contour rouge, et un arrière-plan de couleur bleu. Vous noterez le sélecteur compliqué qu'il a fallu utiliser pour ne cibler que les éléments de saisie.

Cases à cocher :
Boutons radio :
Menus :

Compatibilité des navigateur avec :checked.

La prise en charge de la pseudo-classe :checked ne pose aucun problème avec les navigateurs actuels.

Colonne 1
Prise en charge par les navigateurs du sélecteur par pseudo-classe :checked pour cibler les options sélectionnées dans un contrôle de formulaire.
1
Pseudo-classe
:checked
Estimation de la prise en charge globale.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Opéra Mobile

KaiOS Browser

Edge

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Opéra

Safari

Safari sur IOS

Chrome

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Historique de la pseudo-classe :checked.

  • Sélecteurs - Niveau 3

    Introduction de la pseudo-classe :checked dans la spécification "Selecteurs" niveau 3.
    WD
    03 Août 1999
    Document de travail.
    CR
    13 Novembre 2001
    Candidat à la recommandation.
    PR
    15 Décembre 2009
    Proposé à la recommandation.
    REC
    29 Septembre 2011
    Recommandation.

  • Sélecteurs - Niveau 4

    Pas de changement dans la définition de la pseudo-classe :checked.
    WD
    29 Septembre 2011
    Document de travail.
    CR
    PR
    REC

Voir aussi...

Les pseudo-classes (ainsi que les autres sélecteurs) sont décrites dans la spécification CSS Selectors . Nous vous invitons à consulter cette référence pour une liste complète des pseudo-classes, et de vous reportez plus spécialement aux pseudo-classes ci-dessous, qui sont relatives aux zones de saisie.

:autofill
Pseudo-classe désignant les éléments de saisie dont le contenu a été renseigné automatiquement par le navigateur.
⚠
:blank
Pseudo classe désignant les zones de saisie vides.
⚠
:closed
Pseudo-classe ciblant un élément pouvant être soit ouvert, soit fermé (comme un menu select), et qui se trouve dans l'état fermé.
:default
Pseudo-classe désignant les cases à cocher et boutons radio qui sont cochés par défaut.
:disabled
Pseudo-classe désignant les zones de saisie veerrouillées.
:enabled
Pseudo-classe désignant les zones de saisies non verrouillées.
:in-range
Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.
:indeterminate
Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.
:invalid
Pseudo classe désignant les zones de saisie contenant une information invalide.
⚠
:open
Pseudo-classe ciblant les éléments pouvant être soit ouverts, soit fermés (comme select), et qui se trouvent dans l'état ouvert.
:optional
Pseudo élément désignant les zones de saisie non obligatoires.
:out-of-range
Pseudo-classe désignant les zones de saisie dont la valeur est en dehors de la plage autorisée.
:placeholder-shown
Pseudo-classe désignant les zones de saisie comportant un texte d'aide.
:read-only
Pseudo-classe désignant les zones de saisie en lecture seule.
:read-write
Pseudo-classe désignant les zones de saisie en lecture écriture.
:required
Pseudo-classe désignant les zones de saisie obligatoires.
:user-invalid
Pseudo-classe désignant les zones de saisie dont la valeur est invalide.
:user-valid
Pseudo-classe désignant les zones de saisie dont la valeur est valide.
:valid
Pseudo-classe désignant les zones de saisie contenant une information valide.