:disabled

概述

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

示例

示例选择器

input:disabled
选择所有被禁用的输入框
select.country:disabled
选择带有 country 类名,且被禁用的 select 元素

使用例子

下面的 CSS:

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

作用于下面的 HTML5 片段:

<form action="#">
  <fieldset>
    <legend>Shipping address</legend>
    <input type="text" name="shipping_firstName" disabled>
    <input type="text" name="shipping_lastName" disabled>
    <input type="text" name="shipping_address1" disabled>
    <input type="text" name="shipping_address2" disabled>
    <input type="text" name="shipping_zipCode" disabled>
    <input type="text" name="shipping_town" disabled>
  </fieldset>
  <fieldset>
    <legend>Billing address</legend>
    <label>
      <input type="checkbox" name="billing_is_shipping" value="true" checked> 
      Billing address is the same as shipping address
    </label>
    <input type="text" name="billing_firstName" disabled>
    <input type="text" name="billing_lastName" disabled>
    <input type="text" name="billing_address1" disabled>
    <input type="text" name="billing_address2" disabled>
    <input type="text" name="billing_zipCode" disabled>
    <input type="text" name="billing_town" disabled>
  </fieldset>
</form>

会使所有被禁用的文本输入框具有浅灰色的背景。

规范

Specification Status Comment
WHATWG 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
Working Draft Link to Selectors Level 3.
Selectors Level 3
:disabled
Recommendation Defines the pseudo-class, but not the associated semantic.

浏览器兼容性

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

相关链接

文档标签和贡献者

 此页面的贡献者: AlexChao
 最后编辑者: AlexChao,