:enabled is a pseudo-class selector used to select and style user interface elements (usually form elements) that are enabled.
That is, it matches elements such as buttons (<button>), select menus (<select>), input types (<input>), and textareas (<textarea>), for example, that can accept a user interaction such as a click, text input, or focus.
Trivia & Notes
Enabled elements also have a corresponding disabled state. The disabled state can be styled using the :disabled pseudo-class. :enable allows us to select only the enabled user interface elements, thus filtering out the disabled ones.
CSS properties that might affect a user’s ability to interact with a given user interface element do not affect whether it matches :disabled or :enabled; e.g., the display and visibility properties have no effect on the enabled/disabled state of an element, even if they are set to hide the element.
Just like other pseudo-class selectors, the :enabled selector can be chained with other selectors such as :hover, for example.
Examples
/* styles all enabled elements on a page */
:enabled {
background-color: white;
color: green;
border: 1px solid black;
}
/* styles enabled submit inputs on a page */
input[type="submit"]:enabled {
border: 1px solid green;
}
The following example chains pseudo-selectors :enabled and :hover.
button:enabled:hover {
background-color: green;
color: white;
}
Live Demo
The following demo styles enabled form elements using :enabled. You can also see that disabled elements are not selected and styled in this case, and are styled using :disabled instead. Enabled elements get green text and the textarea’s background color should turn green on hover if your browser supports :enabled.
Browser Support
The :enabled pseudo-class is supported in Chrome, Firefox, safari, Opera 9+, Internet Explorer 9+, and on Android and iOS.
