:disabled Pseudo-Class

CSS :disabled Pseudo-Class

The CSS :disabled pseudo-class selects supported form controls that are disabled. A disabled control is unavailable for normal user interaction and can be styled differently to make its disabled state easier to recognize.

The :disabled Pseudo-Class

The :disabled pseudo-class is added directly to a selector with no space between the selector and the colon.

input:disabled {
  background-color: #eeeeee;
}

The selector input:disabled matches an <input> element when that input is disabled.

The disabled Attribute

HTML form controls can be disabled with the disabled Boolean attribute. When a supported control is disabled, it can match the CSS :disabled pseudo-class.

<input type="text" name="username" disabled>

input:disabled {
  background-color: #eeeeee;
  color: #777777;
}

The input is disabled by the HTML attribute, while the CSS pseudo-class selects the control according to its current disabled state.

Using :disabled with Form Controls

The :disabled pseudo-class can match several form-related elements that support being disabled, including inputs, select controls, textareas, and buttons.

input:disabled,
select:disabled,
textarea:disabled {
  color: #777777;
  background-color: #eeeeee;
}

<label for="email">Email:</label>
<input type="email" id="email" name="email" disabled>

<label for="topic">Topic:</label>
<select id="topic" name="topic" disabled>
  <option>HTML</option>
  <option>CSS</option>
</select>

Each disabled control matches the corresponding :disabled selector and receives the disabled styling.

Using :disabled with Buttons

Buttons are commonly disabled when an action is temporarily unavailable. The :disabled pseudo-class can make that state visually distinct.

button:disabled {
  color: #777777;
  background-color: #eeeeee;
  cursor: not-allowed;
}

<button type="button" disabled>Continue</button>

The button cannot be activated normally while it is disabled, and its appearance communicates that the action is currently unavailable.

How Disabled Controls Behave

A disabled form control is generally unavailable for normal interaction. Users cannot normally click or edit it, and disabled controls do not participate in normal keyboard focus navigation.

Disabled form controls are also not submitted with the form. If a value needs to be submitted but should not be editable, disabling the control may not be the appropriate choice.

<input type="text" name="account" value="12345" disabled>

Although this input displays a value, its name and value are not included in the form data when the form is submitted while the control remains disabled.

:disabled vs :enabled

The :disabled and :enabled pseudo-classes describe opposite availability states for elements that can be enabled or disabled.

input:enabled {
  background-color: white;
}

input:disabled {
  background-color: #eeeeee;
}

These rules allow enabled and disabled controls to receive different styles. The next tutorial covers :enabled in more detail.

Styling Disabled Controls

Disabled controls are often displayed with muted colors to distinguish them from controls that are available for interaction. The difference should remain clear without making the control or its text unnecessarily difficult to see.

input:disabled {
  color: #777777;
  background-color: #eeeeee;
  border-color: #cccccc;
}

CSS changes only the presentation of the disabled state. The actual disabled behavior comes from HTML and the control's disabled state, not from making an element look disabled with CSS.

When to Use :disabled

Use :disabled when supported form controls should receive styles based on whether they are currently disabled. It is useful for visually distinguishing unavailable fields, choices, and actions from controls that users can interact with.

Do not rely on appearance alone to disable a control. Use the appropriate HTML disabled state so the browser also provides the correct interaction and form behavior.

Summary

The CSS :disabled pseudo-class selects supported elements that are currently disabled. It can be used to visually distinguish unavailable form controls while HTML provides the actual disabled behavior.

The next tutorial covers the :enabled pseudo-class, which selects supported elements that are currently enabled.