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,