CSS :enabled Selector

CSS :enabled selector is used to select and style enabled elements on a page. An element is enabled or not is decided by the disabled attribute.

If the element has a disabled attribute, it is considered as a disabled element, otherwise, it is considered as an enabled element.

It means the :enabled selector only selects those elements which do not have the disabled attribute. In case you don’t know, the disabled attribute is mostly used with the form elements such as inputs, buttons, text areas, checkboxes, etc.

The :enabled selector in the following example sets a yellow background to all the enabled input elements:

Example:

input:enabled{
    background-color: yellow;
}

Here is another example that sets a springgreen color background to all the enabled buttons:

Example:

button:enabled{
    background-color: springgreen;
}

CSS Syntax

The syntax of the :enabled selector is as follows:

:enabled{
   CSS Styles;
}

Browser Support

The number in each cell of the table specifies the first version of the browser that fully supports the :enabled selector.