References

Beginner-friendly references for web development, with live, editable examples.

The CSS :disabled selector

Selector CSS All modern browsers Updated
Quick answer

The CSS :disabled pseudo-class matches form controls that carry the disabled attribute — buttons, inputs and selects that cannot be used. Style it so the unavailable state is obvious, typically with reduced opacity and a not-allowed cursor. Its partner :enabled matches the opposite.

Overview

:disabled matches a form control that is disabled — one with the disabled attribute, which the browser already prevents from being clicked, focused or submitted. The pseudo-class lets you make that unavailable state look unavailable.

The conventional treatment is to dim the control with reduced opacity and show a not-allowed cursor, so users understand at a glance that it is off-limits. A typical rule: button:disabled { opacity: 0.5; cursor: not-allowed; }. Its counterpart, :enabled, matches controls that are available, though you will reach for it far less often.

Because :disabled keys off the real disabled attribute, it is the accessible way to indicate an unavailable control — the attribute removes it from the tab order and announces it to assistive technology, while the CSS supplies the visual cue. Just make sure the dimmed styling still has enough contrast to be read.

Syntax

button:disabled,
input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Example

Live example 
<style>
  .btn { background: #1c7ce9; color: #fff; border: 0; padding: 12px 22px; border-radius: 8px; font: 600 15px system-ui, sans-serif; cursor: pointer; }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
</style>
<button class="btn">Enabled</button>
<button class="btn" disabled>Disabled</button>

Best practices

  • Pair reduced opacity with a not-allowed cursor so the disabled state reads clearly.
  • Drive it from the real disabled attribute, which also removes the control from the tab order for you.
  • Keep the dimmed text legible — do not fade it below readable contrast.
  • Use :enabled for the opposite state when you need it, though it is rarely necessary.

Frequently asked questions

How do I style a disabled button in CSS?
Target :disabled, e.g. button:disabled { opacity: 0.5; cursor: not-allowed; }, to show it is unavailable.
What does the :disabled pseudo-class match?
Form controls that have the disabled attribute — buttons, inputs, selects and the like.
Is :disabled accessible?
Yes, because it reflects the native disabled attribute, which removes the control from the tab order and marks it disabled for assistive technology. Keep the visual styling legible.
What is the opposite of :disabled?
:enabled, which matches controls that are not disabled. It is available but seldom needed.
.class :first-child