CSS基本文法 - UI（ユーザインターフェース）擬似クラス

2008/05/26 17:27Update
TAGS: CSS | :enabled | :disabled | :checked | 擬似クラス

CSS3からUI（ユーザー・インターフェース）擬似クラスが用意されました。本文ではUI擬似クラスについて学びます。


:enabled と :disabled 擬似クラス


次のような要素では、disabled（"true｜false"）というプロパティがあります。
<input type="text" disabled="true" />
<textarea disabled="true" />


これらの要素に対して、有効時の表示スタイルを定義するには:enabled擬似クラスを用います、無効時の表示スタイルを定義するには、:disabled擬似クラスを用います。

◇　CSS定義例：
:disabled {
    color:cyan;
    background-color: yellow;
}


input[type="text"]#txt2:enabled {
    color:red;
    background-color: blue;
}


◇　HTML文書例：
<input type="text" disabled="true" id="txt1" value="hello"><br>
<input type="text" id="txt2" value="hello">


Firefox2から上記のHTML文書を開くと、
テキストボックスのtxt1のフォントカラーはcyan色、背景色は黄色と表示されます。
テキストボックスのtxt2のフォントカラーは赤色、背景色はブルーと表示されます。
※IE6、7では未対応のため、確認できておりません。


:checked 擬似クラス


チェックボックスやラジオボックスなどの「チェック」できる要素に、そのチェックされた状態のときにスタイルを指定するには:checked 擬似クラスを用います。
<input type="checkbox" />
<input type="radio" />


◇　CSS定義例：
:checked + label {background-color: red;}


◇　HTML文書例：
<input type="checkbox" value="1" name="chk" id="chk" /><label for="chk">checkbox</label><br />
<input type="radio" name="rdo" value="1" id="rdo0" /><label for="rdo1">radio1</label><br />
<input type="radio" name="rdo" value="0" id="rdo1" /><label for="rdo2">radio2</label><br />


Firefox2では、以上のHTMLコードを表示すると、選択状態時、背景色は赤になること確認できます。

※以上のサンプルをFirefox2で確認済み、IE6、7未対応。

参考資料


W3C CSS3：The UI pseudo-class

有关作者
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Sponsored Link


Comments

  • Relative Articles