:enabled Pseudo-Class

CSS :enabled Pseudo-Class

The CSS :enabled pseudo-class selects supported form controls that are enabled. An enabled control is available for normal user interaction and can be styled differently from controls that are disabled.

The :enabled Pseudo-Class

The :enabled pseudo-class is added directly to a selector with no space between the selector and the colon.

input:enabled {
  background-color: white;
}

The selector input:enabled matches an <input> element when that input is enabled.

What is an Enabled Control?

An enabled form control is available for normal user interaction. For example, users can normally enter text into an enabled text field, choose an enabled option, or activate an enabled button.

<label for="name">Name:</label>
<input type="text" id="name" name="name">

The input does not have the disabled attribute and is enabled, so it matches :enabled.

Using :enabled with Form Controls

The :enabled pseudo-class can match several form-related elements that support enabled and disabled states, including inputs, select controls, textareas, and buttons.

input:enabled,
select:enabled,
textarea:enabled {
  color: #333333;
  background-color: white;
  border-color: #0088cc;
}

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<label for="topic">Topic:</label>
<select id="topic" name="topic">
  <option>HTML</option>
  <option>CSS</option>
</select>

Because these controls are enabled, they match the corresponding :enabled selectors.

Using :enabled with Buttons

Buttons can be styled with :enabled when they are available for interaction.

button:enabled {
  color: white;
  background-color: #0088cc;
  cursor: pointer;
}

<button type="button">Continue</button>

The button is enabled and can be activated normally by the user.

:enabled vs :disabled

The :enabled and :disabled pseudo-classes describe opposite availability states for elements that support being enabled or disabled.

input:enabled {
  background-color: white;
}

input:disabled {
  background-color: #eeeeee;
}

These rules make it possible to give enabled and disabled controls different appearances based on their current state.

Combining :enabled with Other Pseudo-Classes

The :enabled pseudo-class can be combined with other pseudo-classes to style an enabled control only when another state also applies.

input:enabled:focus {
  border-color: #0088cc;
  outline: 2px solid #0088cc;
}

The selector input:enabled:focus matches an input only when it is both enabled and focused.

button:enabled:hover {
  background-color: #006699;
}

The selector button:enabled:hover applies the hover style only to buttons that are currently enabled.

Styling Enabled Controls

Enabled controls should normally look available for interaction. CSS can reinforce this state with appropriate colors, borders, backgrounds, and other visual treatments.

input:enabled {
  color: #333333;
  background-color: white;
  border: 1px solid #0088cc;
}

CSS changes only the presentation of the enabled state. Whether a supported control is actually enabled or disabled is determined by its HTML state and browser behavior.

When to Use :enabled

Use :enabled when supported form controls should receive styles specifically because they are available for interaction. It is useful when a form contains a mixture of enabled and disabled controls or when another pseudo-class should apply only to enabled controls.

A regular selector such as input may be sufficient when all matching controls should receive the same styles regardless of whether they are enabled or disabled.

Summary

The CSS :enabled pseudo-class selects supported elements that are currently enabled. It can distinguish controls that are available for interaction from those that are disabled and can be combined with pseudo-classes such as :focus and :hover.

The next tutorial covers the :required pseudo-class, which selects form controls that must have a value before a form can be successfully submitted.