← Back to pseudo-classes

CSS Pseudo-class / Element

:disabled

Form

Selects form elements that are disabled and cannot be interacted with.

Syntax

input:disabled { }

Example

button:disabled { opacity: 0.4; cursor: not-allowed; }

Common use cases

  • Greying out disabled form fields
  • Showing not-allowed cursor on inactive buttons
  • Reducing opacity on unavailable options

Practical developer insight

Always style :disabled states — users need to know when an element can't be interacted with. Don't rely on opacity alone.

Related

:checked:focus:required