Pseudotřída checked

Pseudotřída checked umožňuje zachytit zaškrtnuté zaškrtávací políčko nebo radio.

Bohužel, nelze nastavit styly pro jejich ozdobení. Například nelze nastavit pozadí nebo barvu ohraničení (lze nastavit například šířku a výšku, ale nebudou mít takový vliv, jak by se dalo očekávat).

Přesto lze nastavit styly pro sousední prvky, například takto: input:checked + p - nastavíme styly pro odstavec, který se nachází přímo pod zaškrtnutým vstupem.

Syntaxe

cssprvek:checked {
  
}

Příklad

Zaškrtněte zaškrtávací políčka a uvidíte, jak se rozsvítí červenou barvou štítky label, které se nacházejí přímo po zaškrtnutých zaškrtávacích políčkách:

html<input type="checkbox" id="elem1">
<label for="elem1">štítek 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">štítek 2</label>

cssinput:checked + label {
  color: red;
}

Результат:

Příklad

Zaškrtněte radio a uvidíte, jak se rozsvítí červenou barvou štítky label, které se nacházejí přímo po zaškrtnutém přepínači:

html<input type="radio" name="elem" id="elem1">
<label for="elem1">štítek 1</label>
<br>
<input type="radio" name="elem" id="elem2">
<label for="elem2">štítek 2</label>

cssinput:checked + label {
  color: red;
}

Результат: