CSS Reference Pseudo-class

:enabled

: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.

View this demo on the Codrops Playground

Browser Support

The :enabled pseudo-class is supported in Chrome, Firefox, safari, Opera 9+, Internet Explorer 9+, and on Android and iOS.

Further Reading

Written by

Last updated February 3, 2015 at 12:34 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.