トップページの中の セレクタの中の UI要素状態擬似クラス (E:enabled, E:disabled)

UI要素状態擬似クラス (E:enabled, E:disabled)

  • 最終更新:2009年7月 7日 13:08

CSS3で定義された、UI要素状態擬似クラスのパターンE:enabled, E:disabledは、 有効または無効にしている時にスタイルが適用されるセレクタです。

例えば、プログラムなど何らかの理由でtextarea要素が入力できない状態(無効)になっている時は、E:disabledが適用され、有効にする条件を満たしたりして入力できる状態(有効)になった場合は、E:enabledが適用されます。

対応ブラウザ
  • IE6未対応
  • IE7未対応
  • IE8未対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

UI要素状態擬似クラスのサンプル

textarea:disabled {
  background: #666;
}

textarea:enabled {
  background: #fff;
}
<p>
<textarea rows="3" cols="30"></textarea>
</p>
<p>
<textarea rows="3" cols="30" disabled="disabled"></textarea>
</p>

textarea要素が無効の場合は、グレーの背景になり、有効な場合は白背景になるようにしています。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

特に変化はしない訳ですが、JSなどを利用して何らかの形で無効になっているtextarea要素を有効にすれば、textarea:enabledの宣言が適用されます。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ