Pseudoklasse checked

Die Pseudoklasse checked erlaubt es, eine markierte Checkbox oder Radio zu erfassen.

Leider können keine Stile zu deren Gestaltung festgelegt werden. Zum Beispiel kann man keinen Hintergrund oder keine Rahmenfarbe festlegen (man kann zwar z.B. Breite und Höhe setzen, aber diese haben nicht den Effekt, den man erwarten könnte).

Trotzdem können Stile für benachbarte Elemente gesetzt werden, zum Beispiel so: input:checked + p - wir definieren Stile für einen Absatz, der sich direkt unter einem markierten Input befindet.

Syntax

element:checked {
	
}

Beispiel

Aktivieren Sie die Checkboxen und Sie werden sehen, wie die Label rot aufleuchten, die sich direkt nach den markierten Checkboxen befinden:

<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;
}

Beispiel

Aktivieren Sie die Radio-Buttons und Sie werden sehen, wie die Label rot aufleuchten, die sich direkt nach dem markierten Schalter befinden:

<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;
}