:checked

Résumé

La pseudo-classe CSS :checked représente les éléments radio (<input type="radio">), les cases à cocher (<input type="checkbox">) ou les (<option> dans <select>), qui sont cochés ou dans un état activé. L'utilisateur peut changer l'état en cliquant sur l'élément ou en sélectionnant une valeur différente, dans ce cas, :checked ne s'applique plus à l'élément.

Syntaxe

element:checked { propriétés CSS }

Exemples

Exemples de sélecteurs

/* tout élément "cochables" */
:checked {
  width: 50px;
  height: 50px;
}

/* seulement les éléments radio */
  input[type="radio"]:checked {
  margin-left: 25px;
}

/* seulement les cases à cocher */
input[type="checkbox"]:checked {
  display: none;  
}

/* seulement les options activées */
option:checked {
  color: red;
}

input[type="radio"]:checked

Représente tous les boutons radios de la page qui sont cochés

input[type="checkbox"]:checked

Représente toutes les cases à cocher de la page qui sont cochées

option:checked

Représente toutes les <option> sélectionnées dans des <select> .

Spécifications

Compatibilité des navigateurs