CSS: la pseudo-classe :checked

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.