CSS :enabled Selector

What You’ll Learn

The :enabled pseudo-class matches form elements that are interactive and not disabled. Use it to give clear visual feedback about which controls users can interact with.

Introduction

The :enabled selector in CSS is a pseudo-class used to match form elements that are currently enabled and can be interacted with by the user.

It works with controls that support the disabled attribute, such as <input>, <button>, <select>, <textarea>, <fieldset>, and <optgroup>.

Definition and Usage

Append :enabled to a selector with no space before the colon: input:enabled or button:enabled. Styles apply whenever the element does not have the disabled attribute and is not otherwise inactive.

📝 Syntax

The syntax for the :enabled pseudo-class is:

element:enabled {
  /* CSS properties */
}

Basic Example

:enabled {
  border: 2px solid #22c55e;
  background-color: #ecfdf5;
}

:disabled {
  border: 2px solid #94a3b8;
  background-color: #f1f5f9;
  cursor: not-allowed;
}

Syntax Rules

• Only form controls that support disabled can match :enabled.
• Elements without a disabled attribute are enabled by default.
• Combine with type selectors: input[type="text"]:enabled.
• Chain with other pseudo-classes: button:enabled:hover.
• Use alongside :disabled for complete form state styling.

Supported Elements

Related Selectors

• :disabled — matches inactive form controls
• :focus — matches when an enabled control has keyboard focus
• :hover — matches on mouse-over (enabled controls only respond to clicks)
• :read-only / :read-write — text field editability states

When to Use :enabled

:enabled helps users understand which controls are active:

• Form validation — Style fields that become enabled after a prerequisite is met.
• Button states — Give enabled submit buttons a strong call-to-action appearance.
• Contrast with disabled — Green borders for active fields, gray for locked ones.
• Conditional forms — Highlight inputs that open up when a checkbox is checked.
• Cursor feedback — Set cursor: pointer on enabled buttons only.

Examples Gallery

Practice :enabled with form styling, scoped button rules, hover combinations, and mixed enabled/disabled forms.

<style>
  :enabled {
    border: 2px solid #22c55e;
    background-color: #ecfdf5;
  }

  :disabled {
    border: 2px solid #94a3b8;
    background-color: #f1f5f9;
    cursor: not-allowed;
  }
</style>

<form>
  <input type="text" placeholder="Enter your name">
  <input type="text" placeholder="Locked field" disabled>
  <button type="submit">Submit</button>
  <input type="checkbox" id="agree">
  <label for="agree">I agree to the terms</label>
</form>

button:enabled {
  background-color: #2563eb;
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 600;
}

button:disabled {
  background-color: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
}

button:enabled {
  background-color: #2563eb;
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:enabled:hover {
  background-color: #1d4ed8;
}

button:enabled:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

select:enabled,
textarea:enabled {
  border: 1px solid #22c55e;
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 0.4rem;
}

select:disabled,
textarea:disabled {
  border: 1px solid #cbd5e1;
  background-color: #f8fafc;
  color: #94a3b8;
}

⚠️ Common Pitfalls

• Non-form elements — :enabled has no effect on <div>, <span>, or <a> because they lack a disabled state.
• Redundant styling — If all fields are enabled, styling the base selector may be simpler than adding :enabled.
• Specificity order — Place :disabled rules after :enabled when both set the same properties.
• Fieldset inheritance — Disabling a <fieldset> disables all nested controls; they will not match :enabled.
• Read-only vs disabled — A read-only input is still :enabled; use :read-only for that state.

♿ Accessibility

• Do not rely on color alone — Pair green/red borders with labels or helper text explaining why a field is disabled.
• Keep disabled fields in tab order when needed — Or use aria-disabled with careful styling if you need custom behavior.
• Focus styles — Style :enabled:focus so keyboard users can see which active field is focused.
• Explain locked fields — Tell users why a control is disabled (e.g., “Complete step 1 first”).

💡 Best Practices