CSS :disabled Pseudo-Class

CSS :disabled Pseudo-Class

The CSS :disabled pseudo-class selects form controls and other elements that are in a disabled state. It allows you to change the appearance of inputs, buttons, select menus, and other supported controls that users cannot currently interact with.

:disabled Syntax

:disabled {
  property: value;
}

The :disabled pseudo-class does not accept arguments. It can be combined with element selectors to target specific types of disabled controls.

Example Syntax

input:disabled {
  background-color: #f5f5f5;
  color: #777;
}

This rule applies a light gray background and muted text color to disabled input elements.

The selector :disabled has a specificity of 0-1-0. Combined with the input type selector, its specificity becomes 0-1-1.

How :disabled Works

The :disabled pseudo-class matches elements that support being disabled and are currently in a disabled state.

In HTML, the Boolean disabled attribute disables supported form controls. Disabled controls generally cannot receive focus, are excluded from form submission, and do not participate in constraint validation.

A control can also become disabled because it belongs to a disabled <fieldset> or, for certain elements, because a parent control group is disabled.

Expected Matching Behavior

The browser updates :disabled matching automatically when a supported control's disabled state changes.

Important: A control is not disabled merely because it looks gray or has pointer-events: none. The element must actually be in a disabled state recognized by HTML.

Elements That Match :disabled

Several HTML form elements support disabled states and can match the :disabled pseudo-class.

Supported Elements

Disabled Input

<label for="username">Username:</label>
<input type="text" id="username" value="Guest" disabled>

input:disabled {
  background-color: #eee;
  color: #777;
  cursor: not-allowed;
}

The text input is disabled and receives the specified styling. Users cannot edit its value while it remains disabled.

Disabled Button

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

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

The button appears faded and cannot be activated through normal user interaction.

Disabled Select Menu

<select name="country" disabled>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

select:disabled {
  background-color: #f5f5f5;
  color: #777;
}

The entire select menu is disabled. Users cannot change the selection, and the control is excluded from form submission.

Disabled Option Group

<select name="package">
  <optgroup label="Available">
    <option value="basic">Basic</option>
  </optgroup>
  <optgroup label="Unavailable" disabled>
    <option value="premium">Premium</option>
  </optgroup>
</select>

The Premium option is disabled because its parent <optgroup> is disabled. The select menu itself remains enabled.

Disabled Fieldsets

The <fieldset> element groups related form controls. Adding the disabled attribute to a fieldset disables its descendant form controls, with an important exception for controls inside the fieldset's first <legend> element child.

HTML

<fieldset disabled>
  <legend>Account Details</legend>
  <label for="email">Email:</label>
  <input type="email" id="email">
  <button type="button">Update</button>
</fieldset>

CSS

fieldset:disabled {
  border: 2px solid #ccc;
  background-color: #f5f5f5;
}
fieldset:disabled input,
fieldset:disabled button {
  opacity: 0.6;
}

The fieldset, email input, and button are disabled. The descendant controls match :disabled even though they do not have individual disabled attributes.

The First Legend Exception

<fieldset disabled>
  <legend>
    <label>
      <input type="checkbox" id="enable-settings">
      Enable settings
    </label>
  </legend>
  <input type="text" value="Settings unavailable">
</fieldset>

The checkbox inside the fieldset's first legend remains enabled. The text input outside that legend is disabled.

This exception allows a control inside the legend to remain interactive, such as a checkbox that enables or disables the fieldset using JavaScript.

:disabled vs. :enabled

The :disabled and :enabled pseudo-classes describe opposite states of elements that support being disabled.

Example

<input type="text" value="Editable">
<input type="text" value="Unavailable" disabled>

input:enabled {
  border: 2px solid #27ae60;
}
input:disabled {
  border: 2px solid #999;
  background-color: #eee;
}

The enabled input receives a green border, while the disabled input receives a gray border and background.

Elements such as ordinary <div> and <p> elements do not match either pseudo-class because they do not support the HTML disabled state.

Practical Uses

The :disabled pseudo-class provides visual feedback when form controls are unavailable.

Styling Unavailable Form Fields

input:disabled,
textarea:disabled,
select:disabled {
  background-color: #f5f5f5;
  color: #777;
  border-color: #ccc;
}

These rules give disabled form fields a consistent appearance.

Highlighting Disabled Buttons

button:disabled {
  background-color: #ddd;
  color: #666;
  cursor: not-allowed;
  opacity: 0.7;
}

This styling makes unavailable actions visually distinct from enabled buttons.

Styling Labels with Disabled Inputs

<label class="form-choice">
  <input type="checkbox" disabled>
  Premium feature
</label>

.form-choice:has(input:disabled) {
  color: #777;
  opacity: 0.7;
}

The :has() pseudo-class allows the label to change appearance when it contains a disabled checkbox.

Distinguishing Disabled and Read-Only Fields

input:disabled {
  background-color: #eee;
  opacity: 0.7;
}
input:read-only:not(:disabled) {
  background-color: #f8f9fa;
}

A disabled input cannot be edited and is excluded from form submission. A read-only text input cannot be edited but can generally receive focus and is submitted with the form.

Best Practices

• Use the HTML disabled attribute to disable supported form controls rather than relying only on CSS.
• Use :disabled to provide a consistent appearance for unavailable controls.
• Remember that disabled form controls are not submitted with the form.
• Use readonly instead of disabled for supported text controls when the value must remain available for form submission.
• Provide an explanation when users may not understand why a control is disabled.
• Maintain sufficient contrast so disabled text remains readable.
• Do not rely on color or opacity alone to explain an unavailable action.
• Use <fieldset disabled> when an entire group of related controls must be disabled.
• Remember that aria-disabled="true" does not automatically disable a control or make it match :disabled.
• Test both enabled and disabled states with keyboard navigation and assistive technology.

:disabled Example

This example demonstrates how the :disabled pseudo-class changes the appearance of a text input and button. Select the checkbox to disable both controls, then clear it to enable them again.

HTML

<div class="disabled-demo">
  <label>
    <input type="checkbox" id="disable-controls">
    Disable controls
  </label>
  <div class="demo-fields">
    <label for="demo-name">Name:</label>
    <input type="text" id="demo-name" value="Sample Name">
    <button type="button" id="demo-button">Submit</button>
  </div>
</div>

CSS

.disabled-demo {
  padding: 12px;
  border: 1px solid #ccc;
}
.disabled-demo .demo-fields {
  margin-top: 12px;
}
.disabled-demo .demo-fields input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 7px;
  margin: 5px 0 10px;
  border: 1px solid #999;
}
.disabled-demo button {
  padding: 7px 12px;
  cursor: pointer;
}
.disabled-demo input:disabled,
.disabled-demo button:disabled {
  background-color: #eee;
  color: #777;
  border-color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}

JavaScript

const toggle = document.querySelector("#disable-controls");
const nameInput = document.querySelector("#demo-name");
const button = document.querySelector("#demo-button");
toggle.addEventListener("change", () => {
  nameInput.disabled = toggle.checked;
  button.disabled = toggle.checked;
});

Browser Result

Check Disable controls to make the input and button unavailable. Their background, text color, border, and cursor styling update automatically.

Play in Editor

Browser Support

Baseline: Widely available. The :disabled pseudo-class has been supported across major browser engines for many years and works in modern versions of Chrome, Edge, Firefox, Safari, and other browsers.

Native form controls may have different default appearances depending on the browser and operating system. Custom CSS can help maintain consistent disabled-state styling.

For current compatibility information, visit Can I Use? .

Specifications

The :disabled pseudo-class is defined in Selectors Level 4. HTML specifies which elements support the disabled state and how disabled controls behave.

Selectors Level 4 - :enabled and :disabled

HTML Living Standard - :disabled