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 a disabled state, in which it can't be activated or accept focus.
/* Selects any enabled element */
input:enabled {
color: #22AA22;
}
Syntax
:enabled
Example
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.
The following HTML...
<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="button" value="Submit" /> </form>
...used with this CSS...
input:enabled {
color: #22AA22;
}
input:disabled {
color: #D9D9D9;
}
...will result in:
Note that the color of the text on the button is also green, as the button is enabled too.
Specifications
| Specification | Status | Comment |
|---|---|---|
| WHATWG HTML Living Standard The definition of ':enabled' in that specification. |
Living Standard | No change. |
| HTML5 The definition of ':enabled' in that specification. |
Recommendation | Defines the semantic regarding HTML and forms. |
| Selectors Level 4 The definition of ':enabled' in that specification. |
Working Draft | No change. |
| CSS Basic User Interface Module Level 3 The definition of ':enabled' in that specification. |
Candidate Recommendation | Link to Selectors Level 3. |
| Selectors Level 3 The definition of ':enabled' in that specification. |
Recommendation | Defines the pseudo-class, but not the associated semantic. |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 9.0 | 9.0 | 3.1 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 2.1 | (Yes) | 1.0 (1) | 9.0 | 9.5 | 3.1 |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
chrisdavidmills,
Kujirah,
erikadoyle,
Sebastianz,
fscholz,
julienw,
jsx,
MusikAnimal,
kscarfone,
FredB,
Sheppy,
wlach,
jswisher,
ronj,
teoli,
tw2113,
brianloveswords,
McGurk,
BijuGC
Last updated by:
chrisdavidmills,