CSS - :disabled

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.