Pseudoklassen checked

Pseudoklassen checked låter dig fånga en markerad kryssruta eller radio.

Tyvärr går det inte att sätta stilar för att dekorera dem. Till exempel går det inte att sätta bakgrund eller ramfärg (man kan sätta till exempel bredd och höjd, men de kommer inte att ha den effekt man kanske förväntar sig).

Trots detta kan man sätta stilar för angränsande element, till exempel så här: input:checked + p - vi sätter stilar för stycket som finns direkt under den markerade inputen.

Syntax

csselement:checked {
  
}

Exempel

Markera kryssrutorna och du kommer att se hur etiketterna label tänds i rött, som finns direkt efter de markerade kryssrutorna:

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

cssinput:checked + label {
  color: red;
}

Результат:

Exempel

Markera radio och du kommer att se hur etiketterna label tänds i rött, som finns direkt efter den markerade radioknappen:

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

cssinput:checked + label {
  color: red;
}

Результат: