CSS :enabled Pseudo-Class

The :enabled pseudo-class selects and styles form elements that are enabled (i.e., elements that do not have the disabled attribute). This is useful for highlighting interactive inputs and buttons.

1. Syntax

input:enabled {
  border: 2px solid green;
  background-color: #fafffa;
}

✅ Styles enabled input fields with a green border.

2. Example – Styling Enabled Form Elements

<form>
  <input type="text" placeholder="You can type here">
  <input type="text" disabled placeholder="This is disabled">
  <button>Enabled Button</button>
  <button disabled>Disabled Button</button>
</form>

input:enabled, button:enabled {
  background-color: white;
  border: 2px solid blue;
  cursor: pointer;
}

input:disabled, button:disabled {
  background-color: lightgray;
  color: gray;
  cursor: not-allowed;
}

✅ Enabled inputs & buttons have a blue border.
✅ Disabled elements are grayed out with a not-allowed cursor.

3. Use Case – Highlight Active Fields

input:enabled:focus {
  border-color: orange;
  outline: none;
  box-shadow: 0 0 5px orange;
}

✅ When an enabled input field is focused, it gets an orange glow.

4. :enabled vs [disabled] Attribute Selector

Feature	:enabled	[disabled]
Dynamic?	Yes, updates automatically	No, applies only to hardcoded attributes
Specificity	Lower	Higher

✅ Use :enabled for dynamic elements that change state.

5. Browser Support

✅ Fully supported in Chrome, Edge, Firefox, Safari, and Opera.

6. Best Practices

✔ Use :enabled to make interactive elements stand out.
✔ Combine with :focus for better user experience.
✔ Use JavaScript to dynamically enable/disable elements