La pseudo-classe :checked in CSS consente di selezionare gli elementi che sono nello stato checked (selezionato o spuntato) . È associata solamente agli elementi per l’inserimento di dati (<input>) dei tipi radio button e checkbox.
Il selettore :checked seleziona i radio button e le checkbox quando sono selezionate o su uno stato attivo. Se non sono selezionate o spuntate dall’utente, non verranno selezionate.
Un semplice esempio che possiamo fare è selezionare la label di una checkbox che è stata spuntata, e cambiare il colore del testo:
<input type="checkbox" id="casella" name="casella">
<label for="casella">Testo della checkbox</label>input[type=checkbox] + label {
color: black;
font-weight: normal;
}
input[type=checkbox]:checked + label {
color: red;
font-weight: bold;
}Il testo della label di default sarà nero con pesantezza normale, ma quando la casella verrà spuntata il testo diventerà rosso e i grassetto.
Nell’esempio appena riportato abbiamo visto come la pseudo-classe :checked sia utile per migliorare l’accessibilità di un modulo, rendendo più evidente una casella che è stata selezionata.
Il :checked potrebbe essere utilizzato anche su input nascosti ma con la label visibile per realizzare applicazioni interattive con l’utente.