:disabled

:disabled CSS伪类代表任何禁用元素。如果某个元素无法被激活（例如选中，点击或接受文本输入）或接受焦点，则该元素是disabled。该元素还具有能激活或接受焦点的启用状态。

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

语法

:disabled

实例

以下CSS：

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

应用于此HTML 5片段：

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

以及一小段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;
  }
}

将导致所有禁用的文本元素在billing字段集中有一个浅灰色背景。

规范

浏览器兼容性