UI要素状態擬似クラス (E:enabled, E:disabled)
CSS3で定義された、UI要素状態擬似クラスのパターンE:enabled, E:disabled
は、
有効または無効にしている時にスタイルが適用されるセレクタです。
例えば、プログラムなど何らかの理由でtextarea要素が入力できない状態(無効)になっている時は、E:disabled
が適用され、有効にする条件を満たしたりして入力できる状態(有効)になった場合は、E:enabled
が適用されます。
- 対応ブラウザ
-
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
の宣言が適用されます。