W3cubDocs

/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 Standard
The definition of ':disabled' in that specification.
Living Standard No change.
HTML5
The definition of ':disabled' in that specification.
Recommendation Defines the semantics of HTML and forms.
Selectors Level 4
The definition of ':disabled' in that specification.
Working Draft No change.
Selectors Level 3
The definition of ':disabled' in that specification.
Recommendation Defines the pseudo-class, but not the associated semantics.

Browser compatibilityUpdate compatibility data on GitHub

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

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled