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

Example

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_is_shipping">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.
CSS Basic User Interface Module Level 3
The definition of ':disabled' in that specification.
Proposed Recommendation Links to Selectors Level 3.
Selectors Level 3
The definition of ':disabled' in that specification.
Recommendation Defines the pseudo-class, but not the associated semantics.

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 Yes 1 91 9 3.1
Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support 2.1 ? Yes 4 9.5 3.1 ?

1. Internet Explorer does not recognize :disabled on the <fieldset> element.

See also

© 2005–2018 Mozilla Developer Network 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