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

csselement:checked {
  
}

Przykład

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

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

cssinput: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:

html<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>

cssinput:checked + label {
  color: red;
}

Результат: