CSS :disabled Pseudo Class

CSS :disabled Pseudo-Class

The :disabled pseudo-class selects and styles form elements that are disabled (disabled attribute present). This is commonly used to indicate unavailable inputs, buttons, or form fields.

1. Syntax

input:disabled {
  background-color: #f0f0f0;
  color: #888;
  cursor: not-allowed;
}

✅ Grays out disabled inputs and prevent user interaction.

2. Example – Styling Disabled Form Elements

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" disabled placeholder="Cannot edit">

  <button type="submit" disabled>Submit</button>
</form>

input:disabled, button:disabled {
  background-color: lightgray;
  color: darkgray;
  border: 1px solid #ccc;
  cursor: not-allowed;
}

✅ The input field and button are visually disabled.
✅ The cursor changes to "not-allowed", reinforcing that interaction is blocked.

3. Use Case – Enabling Submit Button Conditionally

<label>
  <input type="checkbox" id="agree"> I agree to the terms
</label>
<button id="submitBtn" disabled>Submit</button>

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

document.getElementById("agree").addEventListener("change", function() {
  document.getElementById("submitBtn").disabled = !this.checked;
});

✅ The submit button remains disabled until the user checks the agreement box.

4. :disabled vs [disabled] Attribute Selector

Feature	:disabled	[disabled]
Dynamic?	Yes, updates automatically if attribute changes	No, applies only when attribute is in HTML
Specificity	Lower	Higher

✅ Use :disabled for dynamic interactions where the disabled state may change.

5. Browser Support

✅ Fully supported in Chrome, Edge, Firefox, Safari, and Opera.
❌ Not applicable to elements that don't support disabled, like <div>.

6. Best Practices

✔ Always use clear visual cues for disabled elements.
✔ Combine with cursor: not-allowed; for better user experience.
✔ Use JavaScript to dynamically toggle disabled states.