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

elemento:checked {
	
}

Esempio

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

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

input: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:

<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>

input:checked + label {
	color: red;
}