:enabled is a pseudo-class selector used to select and style interface elements (usually form elements) that are enabled. 85d19

That is, it matches elements such as buttons (<button>), select menus (<select>), input types (<input>), and textareas (<textarea>), for example, that can accept a interaction such as a click, text input, or focus.

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 interface elements, thus filtering out the disabled ones.

CSS properties that might affect a ’s ability to interact with a given interface element do not affect whether it matches 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.

/* 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;
}
                

button:enabled:hover {
    background-color: green;
    color: white;
}