Web/CSS/ disabled

The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

/* Selects any disabled <input> */
input:disabled {
  background: #ccc;
}

Syntax

:disabled

Examples

This example shows a basic shipping form. It uses the JavaScript change event to let the user enable/disable the billing fields.

HTML

<form action="#">
  <fieldset id="shipping">
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Address">
    <input type="text" placeholder="Zip Code">
  </fieldset>
  <br>
  <fieldset id="billing">
    <legend>Billing address</legend>
    <label for="billing-checkbox">Same as shipping address:</label>
    <input type="checkbox" id="billing-checkbox" checked>
    <br>
    <input type="text" placeholder="Name" disabled>
    <input type="text" placeholder="Address" disabled>
    <input type="text" placeholder="Zip Code" disabled>
  </fieldset>
</form>

CSS

input[type="text"]:disabled {
  background: #ccc;
}

JavaScript

// Wait for the page to finish loading
document.addEventListener('DOMContentLoaded', function () {
  // Attach `change` event listener to checkbox
  document.getElementById('billing-checkbox').onchange = toggleBilling;
}, false);

function toggleBilling() {
  // Select the billing text fields
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // Toggle the billing text fields
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}

Result

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of ':disabled' in that specification.	Living Standard	No change.
HTML5The definition of ':disabled' in that specification.	Recommendation	Defines the semantics of HTML and forms.
Selectors Level 4The definition of ':disabled' in that specification.	Working Draft	No change.
Selectors Level 3The definition of ':disabled' in that specification.	Recommendation	Defines the pseudo-class, but not the associated semantics.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`:disabled`	Chrome Full support 1	Edge Full support 12 Notes' Full support 12 Notes' Notes' Edge does not recognize `:disabled` on the `<fieldset>` element.	Firefox Full support 1	IE Full support 9 Notes' Full support 9 Notes' Notes' Internet Explorer does not recognize `:disabled` on the `<fieldset>` element.	Opera Full support 9	Safari Full support 3.1	WebView Android Full support 2	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 3.1	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
See implementation notes.': See implementation notes.