Caution

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

CSS辞典

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

【CSSセレクタ】E:enabled

『セレクタ:enabled』で、enabled状態の要素に適用できます。こちらは一般に『状態擬似クラス』と呼ばれます。IE8以下のブラウザでは動きません。enabled状態とはボタンやテキストエリアなどの入力フィールドにおける入力を不可にする『disabled』属性が記述されていない要素です。ちなみに『enabled』という属性は存在しませんので、無効になっている要素を有効にしたい場合は『disabled』属性を丸ごと削除してください。

サンプルコード

style.css

/* enabled状態のinput要素を青字にする */
input:enabled { color: blue;}

/* enabled状態のテキスト入力フィールドのスタイル */
input[type="text"]:enabled { background-color: #fff; border: 1px solid #3498db;}

/* enabled状態のボタンのスタイル（ホバー連携） */
button:enabled { cursor: pointer; background-color: #3498db; color: #fff;}
button:enabled:hover { background-color: #2980b9;}

/* enabled/disabled を組み合わせて状態ごとのスタイルを分ける */
input:disabled { background-color: #eee; cursor: not-allowed;}
input:enabled { background-color: #fff; cursor: text;}

ブラウザでの表示結果

input:enabled { color: blue;} /* enabled状態のinput要素を青字にします。 */

<input type="button" value="ここはボタンです。">
<input type="button" value="ここはボタンです。無効にしてます。" disabled>

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

3.1 以降 ○

2 以前 ×

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

9 以降 ○

8 以前 ×

モバイル

iOS Safari

2 以降 ○

1 以前 ×

Android Browser

2 以降 ○

Chrome Android