Pseudoklasse checked

De pseudoklasse checked maakt het mogelijk om een aangevinkt checkbox of radio button te selecteren.

Helaas is het niet mogelijk om stijlen voor hun decoratie in te stellen. Het is bijvoorbeeld niet mogelijk om een achtergrond of randkleur in te stellen (het is wel mogelijk om bijvoorbeeld breedte en hoogte in te stellen, maar deze hebben niet het effect dat men zou verwachten).

Ondanks dit is het mogelijk om stijlen voor aangrenzende elementen in te stellen, bijvoorbeeld als volgt: input:checked + p - we definiëren stijlen voor de alinea die zich direct onder de aangevinkte input bevindt.

Syntaxis

element:checked {
	
}

Voorbeeld

Vink de checkboxes aan en u zult zien hoe de label-labels die direct na de aangevinkte checkboxes staan, rood oplichten:

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

input:checked + label {
	color: red;
}

Voorbeeld

Selecteer de radio knoppen en u zult zien hoe de label-labels die direct na de geselecteerde knop staan, rood oplichten:

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

input:checked + label {
	color: red;
}