Questa pseudo-classe CSS si applica a tre tipi di elementi dei form.
Gli elementi interessati sono i campi di input di tipo checkbox e radio con l'attributo checked impostato e gli elementi option con l'attributo selected impostato.
.toggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border: 1px solid #ddd;
border-radius: 50%;
transition: all 400ms ease-in;
}
.toggle:checked {
border-color: #000;
background: #eee;
}
Come si può notare dall'esempio, la pseudo-classe :checked è molto utile per creare effetti di transizione da uno stato all'altro degli elementi. Tuttavia è bene ricordare che tali effetti non sono al momento applicabili agli elementi option, i cui stili non sono modificabili se non operando globalmente sull'elemento select.