: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.

/* Selects all text type inputs that are disabled */
input[type="text"]:disabled {
  background: #ccc;
}

Syntax

:disabled

Examples

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

Browser compatibility

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

See also

• :enabled