Pseudoclasse checked

La pseudoclasse checked permette di individuare una checkbox o un radio selezionati.

Purtroppo, non è possibile definire stili per la loro decorazione. Ad esempio, non si può impostare uno sfondo o un colore del bordo (si possono impostare, ad esempio, larghezza e altezza, ma non avranno l'effetto che ci si aspetterebbe).

Nonostante ciò, è possibile definire stili per gli elementi adiacenti, ad esempio così: input:checked + p - definiremo gli stili per il paragrafo che si trova immediatamente dopo l'input selezionato.

Sintassi

csselemento:checked {
  
}

Esempio

Seleziona le checkbox e vedrai come si colorano di rosso le etichette label, che si trovano immediatamente dopo le checkbox selezionate:

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

cssinput:checked + label {
  color: red;
}

Результат:

Esempio

Seleziona i radio e vedrai come si colorano di rosso le etichette label, che si trovano immediatamente dopo l'interruttore selezionato:

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

cssinput:checked + label {
  color: red;
}

Результат: