CSS :enabled Pseudo-class

Definition and Usage

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

It is the opposite of :disabled. Use it when you want a clear “ready to use” look next to inactive controls. Most fields are enabled by default; style :enabled when the contrast matters.

CSS Syntax

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

Selector Forms

How to Use :enabled

Leave the control interactive, then style the enabled state.

1. Do not set disabled on the control you want to style.
2. Write :enabled or a typed form like button:enabled.
3. Use clear colors and cursor: pointer where helpful.
4. Pair with :disabled so both states are obvious.

Live Preview

Toggle the control between enabled and disabled. The input picks up :enabled styles when interactive.

CSS Examples

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

<style>
  input:enabled {
    background: #ecfdf5;
    border: 1px solid #22c55e;
  }
</style>

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

<style>
  button:enabled {
    background: #2563eb;
    color: #fff;
    cursor: pointer;
  }
</style>

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

<style>
  input:enabled {
    color: #15803d;
  }

  input:disabled {
    color: #94a3b8;
  }
</style>

<input type="text" value="Enabled">
<input type="text" value="Disabled" disabled>

Key Takeaways