CssHow-ToBeginner · 3 min read

How to Use :disabled in CSS to Style Disabled Elements

Use the :disabled pseudo-class in CSS to select and style HTML elements that have the disabled attribute. For example, button:disabled targets buttons that users cannot interact with, allowing you to change their appearance.

📐

Syntax

The :disabled pseudo-class targets elements that are disabled using the disabled attribute in HTML. It works with form elements like button, input, select, and textarea.

Example parts:

button: the element type
:disabled: the pseudo-class selecting disabled elements
{ ... }: CSS rules applied to those elements

css

selector:disabled {
  /* styles here */
}

💻

Example

This example shows a button that is disabled and styled with a gray background and lighter text. The :disabled selector changes the look of the button when it cannot be clicked.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Button Example</title>
<style>
  button:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    border: 1px solid #999;
  }
  button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }
</style>
</head>
<body>
  <button disabled>Can't Click Me</button>
  <button>Click Me</button>
</body>
</html>

Output

Two buttons appear: the first is gray and not clickable, the second is normal and clickable.

⚠️

Common Pitfalls

One common mistake is trying to style elements that are not actually disabled or forgetting to add the disabled attribute in HTML. The :disabled selector only works if the element has the disabled attribute.

Another pitfall is confusing :disabled with [disabled] attribute selector; while both work, :disabled is more semantic and specific to disabled state.

css

/* Wrong: styling without disabled attribute has no effect */
button:disabled {
  background-color: red;
}

/* Correct: add disabled attribute in HTML */
<button disabled>Disabled</button>

📊

Quick Reference

Selector	Description
:disabled	Selects all disabled form elements
button:disabled	Selects disabled buttons
input:disabled	Selects disabled input fields
select:disabled	Selects disabled dropdowns
textarea:disabled	Selects disabled text areas

✅

Key Takeaways

Use :disabled to style elements with the disabled attribute.

It works only on form elements like buttons, inputs, selects, and textareas.

Make sure the HTML element has the disabled attribute for the style to apply.

Use cursor: not-allowed to visually indicate disabled state.

:disabled is more semantic and preferred over attribute selectors like [disabled].