Definition and Usage
The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an disabled state, in which it can't be activated or accept focus.
Examples
The following will make the text color a medium green shade when enabled, and a gray shade when disabled. This allows for feedback to the user of which elements are interactable or not. <form action="url_of_form">
<label for="FirstField">First field (enabled):</label> <input type="text" id="FirstField" value="Lorem"><br />
<label for="SecondField">Second field (disabled):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
<input type="submit" value="Submit" />
</form>
input:enabled {
color: #22AA22;
}
input:disabled {
color: #D9D9D9;
}
Note that the color of the text on the button is also green, as the button is enabled too.
Compatibility
Desktop browsers
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 or earlier) | 9.0 | 9.0 | 3.1 |
Mobile browsers
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 2.1 | 1.0 (1) | 9.0 | 9.5 | 3.1 |
