:disabled
: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字段集中有一个浅灰色背景。
规范
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of ':disabled' in that specification. | Living Standard | No change |
HTML5The definition of ':disabled' in that specification. | Recommendation | Defines the semantic regarding HTML and forms. |
Selectors Level 4The definition of ':disabled' in that specification. | Working Draft | No change |
CSS Basic User Interface Module Level 3The definition of ':disabled' in that specification. | Candidate Recommendation | Reference to Selectors Level 3 |
Selectors Level 3The definition of ':disabled' in that specification. | Recommendation | Defines the pseudo-class, but not the associated semantic. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 9.01 | 9.0 | 3.1 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 2.1 | (Yes) | 1.0 (1) | 9.0 | 9.5 | 3.1 |