CSS - :enabled
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.
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:
Syntax
:enabled <a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a> <var>style properties</var> <a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a>
Description
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.
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 9.0 | 9.0 | 3.1 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | 1.0 (1) | 9.0 | 9.5 | 3.1 |
See Also
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. |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/:enabled