CSS :enabled Pseudo-Class

CSS :enabled Pseudo-Class

The CSS :enabled pseudo-class selects form controls that are currently enabled and available for normal user interaction. It is commonly used to style text fields, buttons, checkboxes, radio buttons, and select menus, helping users distinguish available controls from those that are disabled.

:enabled Syntax

:enabled {
  property: value;
}

The :enabled pseudo-class does not accept arguments. It can be combined with element selectors, classes, or other selectors to target particular enabled controls.

Example Syntax

input:enabled {
  border: 2px solid #0088cc;
  background-color: #fff;
}

This rule applies a blue border and white background to enabled input elements.

The :enabled pseudo-class has a specificity of 0-1-0. Combined with the input type selector, its specificity becomes 0-1-1.

How :enabled Works

The :enabled pseudo-class matches elements that support the HTML disabled state but are not currently disabled.

Most supported form controls are enabled by default. Adding the Boolean disabled attribute makes them disabled, while removing that attribute generally makes them enabled again.

However, a form control can also be disabled indirectly, such as when it is inside a disabled <fieldset>. The browser considers these conditions when determining whether the control matches :enabled.

Expected Matching Behavior

The browser updates :enabled matching automatically when a supported control's disabled state changes.

Important: An element does not match :enabled simply because it is visible, clickable, or lacks a disabled attribute. It must be an element type that supports the enabled and disabled states.

Elements That Match :enabled

The :enabled pseudo-class applies to HTML elements that support enabled and disabled states.

Supported Elements

Enabled Input

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

input:enabled {
  border: 2px solid #0088cc;
  background-color: #fff;
}

The input matches :enabled because it supports being disabled but is currently enabled.

Enabled Button

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

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

The button receives the specified styling while it remains enabled.

Enabled Select Menu

<select name="theme">
  <option value="light">Light</option>
  <option value="dark">Dark</option>
</select>

select:enabled {
  border: 2px solid #0088cc;
}

The select menu matches :enabled because it is not disabled.

Enabled Checkbox

<input type="checkbox" id="notifications">
<label for="notifications">Enable notifications</label>

input[type="checkbox"]:enabled {
  accent-color: #0088cc;
}

The checkbox matches :enabled whether it is checked or unchecked. Its enabled state and checked state are separate conditions.

Enabled Controls in Fieldsets

The <fieldset> element groups related form controls. When a fieldset is disabled, most descendant form controls become disabled as well.

Enabled Fieldset

<fieldset>
  <legend>Account Details</legend>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <button type="button">Update</button>
</fieldset>

fieldset:enabled {
  border: 2px solid #0088cc;
}
fieldset input:enabled {
  background-color: #fff;
}

The fieldset and its controls match :enabled because none are disabled.

Disabled Fieldset

<fieldset disabled>
  <legend>Account Details</legend>
  <label for="email-disabled">Email:</label>
  <input type="email" id="email-disabled">
  <button type="button">Update</button>
</fieldset>

The fieldset and its descendant controls are disabled, so they do not match :enabled.

The First Legend Exception

<fieldset disabled>
  <legend>
    <label>
      <input type="checkbox" id="enable-account">
      Enable account
    </label>
  </legend>
  <input type="text" value="Unavailable">
</fieldset>

The checkbox inside the fieldset's first legend remains enabled and matches :enabled. The text input outside the legend is disabled.

This exception makes it possible to place a control inside the legend that can enable the remaining fields through JavaScript.

:enabled vs. :disabled

The :enabled and :disabled pseudo-classes represent opposite states of elements that support being disabled.

Comparison

Example

<input type="text" value="Editable">
<input type="text" value="Unavailable" disabled>

input:enabled {
  border: 2px solid #27ae60;
}
input:disabled {
  border: 2px solid #999;
  background-color: #eee;
}

The first input receives a green border because it is enabled. The second receives a gray border and background because it is disabled.

Ordinary elements such as <div> and <p> match neither pseudo-class because they do not support the HTML disabled state.

Enabled vs. Read-Only

<input type="text" value="Reference Number" readonly>

A read-only text input still matches :enabled because it is not disabled. Although users cannot edit its value, the input can generally receive focus and its value is included in form submission.

Use :read-only when the goal is to style non-editable content rather than disabled controls.

Practical Uses

The :enabled pseudo-class helps distinguish available form controls and apply interactive styling only when those controls can be used.

Styling Available Form Fields

input:enabled,
textarea:enabled,
select:enabled {
  background-color: #fff;
  border: 1px solid #0088cc;
}

These rules provide consistent styling for enabled form fields.

Hover Effects for Enabled Buttons

button:enabled {
  background-color: #0088cc;
  color: #fff;
  cursor: pointer;
}
button:enabled:hover {
  background-color: #006699;
}

The hover effect applies only while the button is enabled. Disabled buttons do not match the selector.

Focus Styles for Enabled Inputs

input:enabled:focus-visible {
  outline: 3px solid #0088cc;
  outline-offset: 2px;
}

This rule adds a visible focus indicator to enabled inputs when the browser determines that a focus indicator should be displayed, such as during keyboard navigation.

Styling Labels for Enabled Controls

<label class="form-choice">
  <input type="checkbox">
  Receive updates
</label>

.form-choice:has(input:enabled) {
  color: #222;
}
.form-choice:has(input:disabled) {
  color: #777;
}

The label styling changes according to the state of its checkbox. The :has() pseudo-class allows the parent label to respond to the state of a descendant input.

Styling Enabled Submit Buttons

button[type="submit"]:enabled {
  background-color: #27ae60;
  color: #fff;
  border: 1px solid #1e8449;
}

This rule highlights submit buttons that are currently enabled. Whether a form is valid or ready to submit must be determined separately.

Best Practices

• Use :enabled to style controls that support the HTML disabled state and are currently enabled.
• Use specific selectors such as button:enabled or input:enabled to avoid unintended styling.
• Remember that most supported form controls are enabled by default.
• Use :disabled for the opposite state rather than relying on the absence of :enabled for unrelated elements.
• Remember that read-only text inputs can still match :enabled.
• Use :focus-visible with :enabled when creating accessible keyboard focus styles.
• Do not rely on CSS alone to prevent user interaction. Use the HTML disabled attribute when a control must be disabled.
• Remember that aria-disabled="true" does not automatically disable an element or change its :enabled matching state.
• Test form controls inside disabled fieldsets, including the first legend exception.
• Keep enabled controls visually distinguishable from disabled controls without relying on color alone.

:enabled Example

This example demonstrates how the :enabled pseudo-class responds when JavaScript enables or disables form controls. Select Disable controls to make the input and button unavailable, then clear the checkbox to enable them again.

HTML

<div class="enabled-demo">
  <label>
    <input type="checkbox" id="toggle-controls">
    Disable controls
  </label>
  <div class="demo-fields">
    <label for="demo-name">Name:</label>
    <input type="text" id="demo-name" value="Sample Name">
    <button type="button" id="demo-button">Continue</button>
  </div>
</div>

CSS

.enabled-demo {
  padding: 12px;
  border: 1px solid #ccc;
}
.enabled-demo .demo-fields {
  margin-top: 12px;
}
.enabled-demo .demo-fields input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 7px;
  margin: 5px 0 10px;
}
.enabled-demo .demo-fields input:enabled {
  border: 2px solid #27ae60;
  background-color: #fff;
}
.enabled-demo .demo-fields input:disabled {
  border: 2px solid #ccc;
  background-color: #eee;
  color: #777;
}
.enabled-demo button {
  padding: 7px 12px;
  border: 1px solid transparent;
}
.enabled-demo button:enabled {
  background-color: #0088cc;
  color: #fff;
  cursor: pointer;
}
.enabled-demo button:disabled {
  background-color: #ddd;
  color: #666;
  cursor: not-allowed;
}

JavaScript

const toggle = document.querySelector("#toggle-controls");
const nameInput = document.querySelector("#demo-name");
const button = document.querySelector("#demo-button");
toggle.addEventListener("change", () => {
  nameInput.disabled = toggle.checked;
  button.disabled = toggle.checked;
});

Browser Result

Initially, the input has a green border and the button has a blue background. Check Disable controls to switch both elements to their disabled appearance. Clear the checkbox to restore the enabled styles.

Play in Editor

Browser Support

Baseline: Widely available. The :enabled pseudo-class has been supported across major browser engines for many years and works in modern versions of Chrome, Edge, Firefox, Safari, and other browsers.

Native form controls may have different default appearances depending on the browser and operating system. Custom CSS can help provide consistent enabled-state styling.

For current compatibility information, visit Can I Use? .

Specifications

The :enabled pseudo-class is defined in Selectors Level 4. The HTML Living Standard specifies which elements support the enabled and disabled states and how those states are determined.

Selectors Level 4 - :enabled and :disabled

HTML Living Standard - :enabled