CSS :enabled Pseudo Classe
Usa la pseudo-classe CSS :enabled per selezionare e stilizzare gli elementi abilitati. Scopri la pseudo-classe con esempi pratici.
La pseudo-classe CSS :enabled corrisponde a qualsiasi elemento di form che è attualmente abilitato — ovvero può essere attivato (cliccato, digitato o messo a fuoco) e può ricevere input dall'utente. È il diretto contrario di :disabled.
Un elemento è "abilitato" quando è il tipo di elemento che supporta uno stato disabled e non ha l'attributo disabled impostato. Questa pagina tratta quando :enabled si applica, gli elementi che interessa, i problemi comuni e due esempi pratici.
Quali elementi possono essere abilitati
:enabled si applica solo agli elementi che possono effettivamente essere disabilitati. Si tratta dei controlli di form interattivi:
<button><input>(tutti i tipi)<select><textarea><option><optgroup><fieldset>
Un <div>, un <p> o un link non possono mai essere "abilitati" o "disabilitati" in questo senso, quindi :enabled non corrisponderà mai a loro — anche se sono interattivi.
Perché usarlo
Per impostazione predefinita un controllo abilitato appare già attivo, quindi raramente si ha bisogno di :enabled da solo. Diventa utile quando si vuole un chiaro contrasto visivo tra i controlli utilizzabili e quelli non utilizzabili — ad esempio, illuminando i campi che l'utente può compilare mentre :disabled ingrigisce quelli che non può. Abbinare le due pseudo-classi rende immediatamente evidente l'interattività di un form.
Aspetti a cui prestare attenzione
- Stato predefinito. Poiché i controlli sono abilitati per impostazione predefinita,
:enabledcorrisponde a loro a meno che non si aggiunga esplicitamente l'attributodisabled. Impostaredisabledin HTML o tramite JavaScript (element.disabled = true) trasforma un elemento da:enableda:disabled. <fieldset disabled>a cascata. Disabilitare un<fieldset>disabilita tutti i controlli al suo interno, quindi quei figli smettono di corrispondere a:enabledanche senza il proprio attributodisabled.- Solo lettura non è disabilitato. Un
<input readonly>è ancora abilitato — corrisponde a:enabled, non a:disabled. Usa:read-onlyper lo stile di sola lettura.
Versione
Sintassi
Esempio di sintassi CSS :enabled
:enabled {
css declarations;
}Esempio del selettore :enabled:
Esempio di codice CSS :enabled
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 2px 5px;
}
input[type=text]:enabled {
background: #eee;
}
input[type=text]:disabled {
background: #ccc;
}
</style>
</head>
<body>
<h2>:enabled selector example</h2>
<form action="#">
<label for="name">First name:</label>
<input type="text" value="John" id="name" />
<br />
<label for="lastname">Last name:</label>
<input type="text" value="Smith" id="lastname" />
<br />
<label for="country">Country:</label>
<input type="text" disabled="disabled" value="10 High Street" id="country" />
</form>
</body>
</html>Esempio del selettore :enabled con il tag <option>:
Altro esempio di codice CSS :enabled
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
option:enabled {
background: #d4f7d4;
color: #064;
}
option:disabled {
background: #f0f0f0;
color: #aaa;
}
</style>
</head>
<body>
<h2>:enabled selector example</h2>
<select>
<option value="paris">Paris</option>
<option value="london" disabled>London</option>
<option value="moscow">Moscow</option>
<option value="rome" disabled>Rome</option>
<option value="berlin">Berlin</option>
</select>
</body>
</html>Si noti che i browser limitano quanto possono essere ridisegnati un <select> e i suoi elementi <option>, quindi il rendering esatto di questi colori varia tra i browser e i sistemi operativi.
Supporto dei browser
La pseudo-classe :enabled è supportata in tutti i browser moderni, inclusi Chrome, Firefox, Safari ed Edge.
Pseudo-classi correlate
:disabled— il contrario di:enabled; corrisponde ai controlli che non possono essere utilizzati.:read-only— corrisponde ai controlli che l'utente non può modificare (nota: sono ancora:enabled).:checked— corrisponde a checkbox, radio button e opzioni selezionate.:required— corrisponde ai controlli di form che devono essere compilati.:focus— corrisponde al controllo che ha attualmente il focus della tastiera.