:disabled - CSS（层叠样式表） 编辑

:disabled  CSS 伪类表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态（enabled state），在启用状态下，元素可以被激活或获取焦点。

 

/* Selects any disabled <input> */
input:disabled {
  background: #ccc;
}

 

语法

:disabled

示例

这个例子显示基本的购物表单。通过使用 JavaScript change 事件让用户启用/禁用付款字段。

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

结果

 

规范

Specification	Status	Comment
HTML Living Standard :disabled	Living Standard	No change.
HTML5 :disabled	Recommendation	Defines the semantic regarding HTML and forms.
Selectors Level 4 :disabled	Working Draft	No change.
CSS Basic User Interface Module Level 3 :disabled	Recommendation	Link to Selectors Level 3.
Selectors Level 3 :disabled	Recommendation	Defines the pseudo-class, but not the associated semantic.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 or earlier)	9.0	9.0	3.1

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	2.1	1.0 (1)	9.0	9.5	3.1

相关链接

• :enabled