CSS :disabled Selector

What You’ll Learn

The :disabled pseudo-class matches form elements that cannot be interacted with. Use it to give clear visual feedback when controls are temporarily or permanently unavailable.

Introduction

The :disabled selector in CSS is used to select form elements that are currently disabled — meaning they cannot be interacted with or modified by the user.

This pseudo-class is particularly useful for providing visual feedback on form controls that are temporarily or permanently unavailable, such as a submit button before form validation passes or a username field locked after registration.

Definition and Usage

Append :disabled to a selector with no space before the colon: :disabled, input:disabled, or button:disabled. Styles apply whenever the element has the HTML disabled attribute and disappear when it is removed.

📝 Syntax

The syntax for the :disabled pseudo-class is:

:disabled {
  /* CSS properties */
}

Basic Example

/* Style for disabled elements */
:disabled {
  background-color: #f1f5f9;
  border: 2px solid #94a3b8;
  color: #94a3b8;
  cursor: not-allowed;
}

/* Style for enabled elements (contrast) */
:enabled {
  background-color: #ecfdf5;
  border: 2px solid #22c55e;
}

Supported Elements

Syntax Rules

• Requires the HTML disabled attribute on the element.
• Combine with type selectors: input[type="email"]:disabled.
• Pair with :enabled for clear enabled/disabled contrast.
• Disabled elements cannot receive focus or submit form data.
• fieldset[disabled] disables all controls inside the fieldset.

Related Selectors

• :enabled — matches interactive form controls without disabled
• :focus — disabled elements cannot receive focus
• :hover — disabled elements typically ignore hover in browsers
• :read-only — read-only fields can still be focused (different from disabled)
• :default — matches the default option in a form group

When to Use :disabled

:disabled helps users understand which controls are unavailable:

• Form validation — Gray out a submit button until required fields are filled.
• Locked fields — Style username or ID fields that cannot be edited after signup.
• Conditional forms — Disable sections until a prerequisite checkbox is checked.
• Loading states — Disable buttons while a form is submitting to prevent double-clicks.
• Permission restrictions — Show controls as inactive when the user lacks access.

Examples Gallery

Practice :disabled with login forms, button styling, opacity effects, and fieldset-wide disabling.

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

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

<form>
  <input type="text" placeholder="Username" disabled>
  <input type="password" placeholder="Password">
  <button type="submit">Login</button>
</form>

button:disabled {
  background-color: #cbd5e1;
  color: #64748b;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  cursor: not-allowed;
  opacity: 0.7;
}

button:enabled {
  background-color: #2563eb;
  color: #fff;
  cursor: pointer;
}

input:disabled {
  background-color: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #94a3b8;
  opacity: 0.65;
  cursor: not-allowed;
}

select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

<style>
  fieldset:disabled {
    opacity: 0.6;
    border: 1px dashed #94a3b8;
    border-radius: 0.5rem;
    padding: 1rem;
  }

  fieldset:disabled :disabled {
    cursor: not-allowed;
  }
</style>

<fieldset disabled>
  <legend>Shipping (unavailable)</legend>
  <input type="text" placeholder="Address">
  <input type="text" placeholder="City">
</fieldset>

💬 Usage Tips

• Use :disabled alongside :enabled to create distinct styles for both states.
• Add the disabled attribute in HTML — CSS will apply automatically without JavaScript.
• Combine with element selectors (input:disabled, button:disabled) for precise targeting.
• Set cursor: not-allowed on disabled controls for immediate visual feedback.
• Toggle the disabled attribute with JavaScript for dynamic form validation.

⚠️ Common Pitfalls

• Non-form elements — :disabled does not apply to <div> or <span>. Use a class for custom components.
• Subtle styling only — Light gray on white may be hard to see. Ensure enough contrast for all users.
• aria-disabled alone — CSS :disabled does not match aria-disabled="true" without the HTML disabled attribute.
• Disabled vs read-only — Read-only fields can still be focused; disabled fields cannot.
• Excluding from forms — Disabled controls are not submitted with form data.

♿ Accessibility

• Visual contrast — Disabled controls must look clearly different from enabled ones.
• Do not rely on color alone — Combine color, opacity, cursor, and labels to indicate state.
• Screen readers — The disabled attribute is announced automatically; avoid removing it.
• Explain why — Add helper text near disabled fields explaining why they are locked.
• Focus behavior — Disabled elements are skipped in tab order, which is correct behavior.

💡 Best Practices