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

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari

Opéra

Chrome

Edge

Firefox

Safari sur IOS

Androïd Brower

KaiOS Browser

Chrome pour Androïd

Firefox 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

    Ce document décrit les sélecteurs qui existent déjà dans CSS1 et CSS2, et présente en plus de nouveaux sélecteurs pour CSS3 et d'autres langages qui pourraient en avoir besoin.

    Concernant :checked, 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

    Ce module de spécification définit de nouveaux sélecteurs utilisables en CSS.

    Concernant :checked, 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 Sélecteurs. 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.
:checked
Pseudo-classe désignant les cases à cocher (ou boutons radio) qui sont cochés, ainsi que les éléments de menu sélectionnés.
⚠
: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 ciblant les cases à cocher et boutons radio qui sont cochés par défaut.
:disabled
Pseudo-classe ciblant les zones de saisie verrouillées (celles qui comportent l'attribut disabled).
:enabled
Pseudo-classe désignant les zones de saisies non verrouillées.
::file-selector-button
Cible le bouton dans une zone de saisie du type file. Ce bouton a un rendu différent dans chaque navigateur.
: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 ciblant 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.