:disabled

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

Syntax

:disabled { style properties }

Examples

Example selectors

input:disabled

Selects all disabled inputs

select.country:disabled

Targets a select element with class country that is disabled

Usage example

The following CSS:

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

Applied to this HTML5 fragment:

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

With a little javascript:

function toggleBilling() {
  var billingItems = document.querySelectorAll('#billing input[type="text"]');
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}

Will result in all disabled text elements in the billing fieldset having a light grey background.

Specifications

Specification	Status	Comment
WHATWG 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 semantic regarding 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.	Candidate Recommendation	Reference to Selectors Level 3
Selectors Level 3 The definition of ':disabled' in that specification.	Recommendation	Defines the pseudo-class, but not the associated semantic.

Browser compatibility

See also

• :enabled