: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> のすべてのテキスト要素が、ライトグレーの背景を持つようになります。

仕様

ブラウザ実装状況

関連情報

• :enabled