CSS :enabled

The :enabled pseudo-class in CSS is used to select form elements that are enabled for user input. This means that an element is considered :enabled if the user can interact with it, such as typing in a text input field or selecting an option in a dropdown menu.

Let's take a look at how to use the :enabled pseudo-class with some examples:

Result:

In the example above, we have two text input fields. The first input field is disabled using the disabled attribute, while the second input field is enabled for user input. We can apply CSS styles to these input fields based on whether they are enabled or disabled using the :enabled pseudo-class.

Let's see the CSS code that applies styles to the enabled input fields:


input:enabled {
  background-color: lightblue;
  border: 1px solid blue;
  color: black;
}

Result:

Now, the enabled input field (Input 2) has a light blue background, blue border, and black text color applied to it, based on the CSS styles defined for the :enabled pseudo-class.

Remember that the :enabled pseudo-class can be useful for enhancing the user experience by visually indicating which form elements are available for input.