:enabled

The pseudo-class :enabled sets styles for the active input, in this context – active means input that hasn’t had the disabled attribute applied.

 

The :enabled pseudo-class is used to apply styling to enabled (non-disabled) form elements. By default, all form elements are accessible unless the disabled attribute is added to them in the HTML code.

Syntax

/* Selects an Enabled <input> field */

input:enabled {
  color: red;
}

Example

HTML

<form action="#">
  <label for="enabled_field">First field:</label>
  <input type="text" id="enabled_field" value="enabled" />
  <label for="disabled_field">Second field:</label>
  <input type="text" id="disabled_field" value="disabled" disabled="disabled" />
</form>

CSS

input:enabled {
background-color: white;
}

input:disabled {
background-color: gray;
}