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.

Selector
:enabled4.09.03.53.29.6

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.