Pseudoclasa checked

Pseudoclasa checked permite selectarea unei casetă de bifat sau a unui buton radio selectat.

Din păcate, nu se pot stabili stiluri pentru decorarea lor. De exemplu, nu se poate seta fundalul sau culoarea bordurii (se pot seta, de exemplu, lățimea și înălțimea, dar acestea nu vor avea efectul scontat).

Cu toate acestea, se pot stabili stiluri pentru elementele adiacente, de exemplu, așa: input:checked + p - vom stabili stiluri pentru paragraful care se află imediat după un element input selectat.

Sintaxă

csselement:checked {
  
}

Exemplu

Bifați casetele și veți vedea cum se colorează în roșu etichetele label, care se află imediat după casetele de bifat selectate:

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

cssinput:checked + label {
  color: red;
}

Результат:

Exemplu

Selectați butoanele radio și veți vedea cum se colorează în roșu etichetele label, care se află imediat după butonul radio selectat:

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

cssinput:checked + label {
  color: red;
}

Результат: