Pseudo-classe :checked de CSS3

Définition et utilisation

CSS :checked Les pseudo-classes sont utilisées pour correspondre à tout élément sélectionné <input> ou <option> éléments.

Cela s'applique aux éléments <input type="radio">, <input type="checkbox"> et <select> avec <option>.

Exemple

Exemple 1

Définir un contour fin rouge pour tous les éléments <input> sélectionnés :

input:checked {
  outline: 1px solid red;
}

Essayez-le vous-même

Exemple 2

Définir des styles différents pour les boutons radio, les cases à cocher et les options sélectionnées :

input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px bleu;
}
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px marron;
}
option:checked {
  color: blue;
  background-color: pink;
}

Essayez-le vous-même

Syntaxe CSS

:checked {
  déclarations css;
}

Détails techniques

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette pseudo-classe.