:enabled

:enabledCSS擬似クラスで、すべての有効な要素を表します。有効な要素とは、アクティブ化 (選択、クリック、入力など) したりフォーカスを得たりすることができるものです。要素には無効な状態、つまりアクティブ化したりフォーカスを得たりすることができない状態もあります。

/* 有効な <input> を選択 */
input:enabled {
  color: blue;
}

構文

:enabled

以下の例は有効なときに文字列の色とボタンの <input> を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。

HTML

<form action="url_of_form">
  <label for="FirstField">First field (enabled):</label>
  <input type="text" id="FirstField" value="Lorem"><br>

  <label for="SecondField">Second field (disabled):</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>

  <input type="button" value="Submit">
</form>

CSS

input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}

結果

仕様書

仕様書 状態 備考
HTML Living Standard
:enabled の定義
現行の標準 変更なし。
HTML5
:enabled の定義
勧告 HTML に関する意味を定義。
Selectors Level 4
:enabled の定義
草案 変更なし。
Selectors Level 3
:enabled の定義
勧告 擬似クラスを定義。ただし意味の結びつけの定義はなし。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:enabledChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 9Safari 完全対応 3.1WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報