Pseudo-classe checked

La pseudo-classe checked permet de cibler une case à cocher ou un bouton radio sélectionné.

Malheureusement, il n'est pas possible de définir des styles pour les embellir. Par exemple, on ne peut pas définir un arrière-plan ou une couleur de bordure (on peut définir, par exemple, la largeur et la hauteur, mais elles n'auront pas l'effet auquel on pourrait s'attendre).

Malgré cela, on peut définir des styles pour les éléments adjacents, par exemple comme ceci : input:checked + p - nous définirons les styles pour le paragraphe qui se trouve directement après l'input sélectionné.

Syntaxe

élément:checked {
	
}

Exemple

Cochez les cases et vous verrez comment les étiquettes label qui se trouvent directement après les cases cochées s'allument en rouge :

<input type="checkbox" id="elem1">
<label for="elem1">étiquette 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">étiquette 2</label>

input:checked + label {
	color: red;
}

Exemple

Sélectionnez les boutons radio et vous verrez comment les étiquettes label qui se trouvent directement après le bouton sélectionné s'allument en rouge :

<input type="radio" name="elem" id="elem1">
<label for="elem1">étiquette 1</label>
<br>
<input type="radio" name="elem" id="elem2">
<label for="elem2">étiquette 2</label>

input:checked + label {
	color: red;
}