Pseudoklasa checked

Pseudoklasa checked pozwala złapać zaznaczony checkbox lub radio.

Niestety, nie można ustawić stylów dla ich dekoracji. Na przykład nie można ustawić tła lub koloru obramowania (można ustawiać, na przykład, szerokość i wysokość, ale nie będą one miały takiego wpływu, jak można by się spodziewać).

Mimo to, można ustawić style dla sąsiednich elementów, na przykład tak: input:checked + p - ustawimy style dla akapitu, który znajduje się bezpośrednio pod zaznaczonym inputem.

Składnia

element:checked {
	
}

Przykład

Zaznaczaj checkboxy i zobaczysz, jak zapalają się czerwonym kolorem etykiety label, które znajdują się bezpośrednio po zaznaczonych checkboxach:

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

input:checked + label {
	color: red;
}

Przykład

Zaznaczaj radio i zobaczysz, jak zapalają się czerwonym kolorem etykiety label, które znajdują się bezpośrednio po zaznaczonym przełączniku:

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

input:checked + label {
	color: red;
}