La pseudo-classe :enabled in CSS può essere utilizzata per selezionare elementi che possono essere messi a fuoco e non sono disabilitati, quindi elementi abilitati. Questo selettore è associato solamente con gli elementi dei moduli, ovvero <input>, <select> e <textarea>. Gli elementi abilitati sono quelli che l’utente può selezionare, in cui può inserire dati o più semplicemente che possono essere premuti o messi a fuoco.
Per esempio, con il seguente codice CSS andiamo a rendere la label di ogni checkbox abilitata di colore verde e con il carattere in grassetto.
input:enabled + label {
color: green;
font-weight: bold;
}Ecco di seguito come appare in azione. Le label delle caselle che possiamo selezionare sono di colore verde e con il testo grassetto:
In teoria con il selettore :enabled potremmo selezionare anche gli elementi <a>, <area> o <link> con l’attributo href impostato, tuttavia i browser non supportano questo scenario.
Possiamo applicare dello stile anche agli elementi button, input, textarea, optgroup, option e fieldset che non sono disabilitati.
Quando l’elemento <menu> è supportato, possiamo anche applicare dello stile agli elementi <command> e <li> che sono contenuti all’interno di esso, se non sono disabilitati.
Tieni presente che, anche se la cosa può sembrare controintuitiva, con questo attributo non è possibile selezionare gli elementi con gli attributi contenteditable e tabindex. La specifica CSS non supporta questa modalità d’uso e nemmeno i browser.