:disabled

概要

CSS の :disabled 擬似クラスは 使用不可 (disabled) 状態のすべての要素を表します。実行(選択、クリック、テキスト入力の受けつけ)したりフォーカスを受けたりできない状態の要素は、使用不可状態です。要素が使用可能状態になると、実行したりフォーカスを受けたりできます。

セレクタの例

input:disabled
使用不可のすべての input を選択
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">
    <input type="text" name="shipping_lastName">
    <input type="text" name="shipping_address1">
    <input type="text" name="shipping_address2">
    <input type="text" name="shipping_zipCode">
    <input type="text" name="shipping_town">
  </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>

請求書の <fieldset> のすべてのテキスト要素が、ライトグレーの背景を持つようになります。

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard Living Standard 変更なし
HTML5 勧告候補 HTMLおよびフォームに関して意味論的な定義
Selectors Level 4 草案 変更なし
CSS Basic User Interface Module Level 3 草案 Selectors Level 3 にリンク
Selectors Level 3 勧告 擬似クラスを定義。しかし意味論との結び付けはなし

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 9.0 9.0 3.1
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 2.1 1.0 (1) 9.0 9.5 3.1

関連情報

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,
サイドバーを隠す