Pseudo klasa checked

Pseudo klasa checked omogućava da se uhvati označen checkbox ili radio.

Nažalost, stilove za njihovu dekoraciju nije moguće zadati. Na primer, ne može se zadati pozadina ili boja ivice (može se zadati, na primer, širina i visina, ali one neće imati onakav efekat kakav bi se mogao očekivati).

Uprkos tome, moguće je zadati stilove za susedne elemente, na primer, ovako: input:checked + p - zadaćemo stilove za pasus, koji se nalazi neposredno ispod označenog input polja.

Sintaksa

csselement:checked {
  
}

Primer

Označite checkbox-ove i videćete kako se crvenom bojom osvetljavaju oznake label, koje se nalaze neposredno iza označenih checkbox-ova:

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

cssinput:checked + label {
  color: red;
}

Результат:

Primer

Označite radio dugmad i videćete kako se crvenom bojom osvetljavaju oznake label, koje se nalaze neposredno iza označenog prekidača:

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

cssinput:checked + label {
  color: red;
}

Результат: