:enabled CSS Pseudo Class

The :enabled pseudo-class in CSS is used to select and style form elements that are currently interactive, meaning they can receive user input. This typically includes elements such as input, select, textarea, and button when they are not disabled. By targeting only enabled elements, developers can apply specific visual styles or behaviors to inputs that the user can actively engage with, while ignoring elements that are disabled and cannot be interacted with.

One common use of :enabled is to visually differentiate interactive form controls from those that are inactive. For example, a submit button might be styled differently when it is enabled versus when it is disabled, improving the clarity of the user interface. This pseudo-class is often paired with :disabled to create contrasting states for form elements. Unlike :focus, which styles elements based on user interaction, :enabled strictly reflects the current capability of the element to accept input.

An example of using :enabled could be:

<form>
  <input type="text" placeholder="Enter name">
  <input type="text" placeholder="Disabled field" disabled>
  <button type="submit">Submit</button>
</form>

input:enabled {
  border: 2px solid #4CAF50;
  background-color: #f0fff0;
}

button:enabled {
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
}

In this example, the enabled input and button receive distinct styling, while the disabled input remains unaffected. Using :enabled enhances accessibility by making interactive elements more visually apparent and ensures a better user experience in forms where some inputs may be temporarily disabled. Additionally, it can be combined with other selectors or pseudo-classes to implement complex UI behaviors, such as conditionally enabling submit buttons based on form validation.