La pseudo-classe :disabled consente di applicare uno stile CSS solamente agli elementi HTML che possono ricevere input dagli utenti ma sono disabilitati. Secondo la specifica CSS è un selettore che consente di applicare dello stile a un elemento in base alle interazioni dell’utente con quell’elemento.
input:disabled {
background-color: gray;
}Gli elementi HTML a cui può essere impostato l’attributo disabled, ovvero disabilitato, sono: button, input, textarea, optgroup, option e fieldset. Le due sintassi valide per impostare questo attributo sono disabled="disabled" oppure, a partire da HTML5, anche disabled="true | false", utilizzando un valore booleano. Per definizione, un elemento è disabilitato quando non può essere attivato da parte dell’utente, ovvero non può essere selezionato, cliccato, accettare un input o essere messo a fuoco.
Lo stile di questi elementi disabilitato può essere definito utilizzando questo attributo:
Il selettore :disabled può essere concatenato ad altri selettori, come per esempio :like, :before o :after per aggiungere dei testi o delle icone utili a fornire un feedback visivo all’utente.
Qualsiasi proprietà che possa essere animata attraverso le Transizioni CSS o le Animazioni CSS sarà animata anche quando l’attributo disabled viene attivato o disattivato su un dato elemento HTML. Questo può essere utile per aggiungere delle animazioni ai form.