Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

トップページ
CSS辞典
【CSSセレクタ】E:disabled

【CSSセレクタ】E:disabled

『セレクタ:disabled』で、disabled状態の要素に適用できます。こちらは一般に『状態擬似クラス』と呼ばれます。IE8以下のブラウザでは動きません。disabled状態とはボタンやテキストエリアなどの入力フィールドにおける入力を不可にする『disabled』属性が記述された要素です。尚、XHTMLの場合は属性の値を省略できないため、『disabled="disabled"』と記述する必要がありますのでご注意下さい。

サンプルコード

index.html

<input type="button" value="ここはボタンです。" disabled> <!-- このようにdisabled属性を指定します。 -->
<input type="button" value="ここはボタンです。" disabled="disabled"> <!-- XHTMLでは属性値を省略できないため『disabled="disabled"』と記述する必要があります。 -->

style.css

/* disabled状態のinput要素のスタイル */
input:disabled { color: white; background-color: gray;}

/* disabled状態のボタン */
button:disabled { opacity: 0.5; cursor: not-allowed;}

/* disabled状態のテキストエリア */
textarea:disabled { background-color: #f5f5f5; border-color: #ddd;}

/* disabled状態のラベルを薄く表示 */
input:disabled + label { color: #999;}

ブラウザでの表示結果

input:disabled { color: white; background-color: gray;} /* disabled状態のinput要素を白字にして背景色をグレーにします。 */

<input type="button" value="ここはボタンです。有効にしてます。">
<input type="button" value="ここはボタンです。無効にしてます。" disabled>
<input type="textarea" value="ここは有効なテキストエリア">
<input type="textarea" value="ここは無効なテキストエリア" disabled>