CSS :disabled Pseudo-class

Definition and Usage

The :disabled pseudo-class matches form controls that are disabled — they cannot be clicked, typed into, or focused.

Set the HTML disabled attribute (or nest the control in a disabled fieldset). Pair with :enabled for the interactive state. Prefer clear muted styles and cursor: not-allowed so the inactive state is obvious.

CSS Syntax

Often typed as input:disabled, button:disabled, or select:disabled.

Selector Forms

How to Use :disabled

Disable in HTML, then style the state in CSS.

1. Add disabled on the control (or on a wrapping fieldset).
2. Write :disabled or a typed form like button:disabled.
3. Use muted colors, lower opacity, and cursor: not-allowed.
4. Style :enabled when you want a clear active contrast.

Live Preview

Toggle the disabled attribute. The input picks up :disabled styles when inactive.

CSS Examples

Each snippet focuses on :disabled. Use Try It Yourself for a live editor.

<style>
  input:disabled {
    background: #e2e8f0;
    color: #64748b;
    cursor: not-allowed;
  }
</style>

<label for="user">Username</label>
<input id="user" type="text" value="locked" disabled>
<input type="text" placeholder="Editable field">

<style>
  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
</style>

<button type="button">Save</button>
<button type="button" disabled>Save (disabled)</button>

<style>
  input:disabled {
    background: #e2e8f0;
    cursor: not-allowed;
  }
</style>

<fieldset disabled>
  <legend>Billing</legend>
  <input type="text" placeholder="Name">
  <input type="text" placeholder="Zip">
</fieldset>

Key Takeaways