コニファ・ロゴ

csstest:CSS3 disabled擬似クラスなどを使って、input要素を種別ごとに色分け

input要素にはたくさんのタイプがありますが、会員情報の追加や書き換えをフォームを使っておこなう際は、input[type="text"]やinput[type="password"]などが主になりますが、これらのタイプだけであっても、いくつかの属性を混在させたものになると、ユーザーが入力に迷うことがあります。

そこで、enabled擬似クラスなどを使って、分かりやすく色分けしてみました。

サンプルは、会員情報の更新フォームで、いずれも次のように違う属性のテキストフィールドを混在させています。(2)は、タイプが「password」、それ以外は、「text」になっています。(1)は、「disabled="disabled"」(または単にdisabled)で、無効化しています。(3)と(5)は、「readonly="readonly"」で読み出し専用にしてあります。(4)と(6)は無指定で、書き換え可能、更新の対象フィールドになります。

HTMLソース

(1)ユーザーID:<input name="a" type="text" value="example12345" disabled="disabled">
(2)パスワード:<input name="b" type="password" value="pass12345">
(3)住所:<input name="c" type="text" value="東京都中央区築地" readonly="readonly">
(4)メールアドレス:<input name="d" type="text" value="taro@example.com">
(5)お名前:<input name="e" type="text" value="南極タロー" readonly="readonly">
(6)情報1の内容:</dt><dd><input name="f" type="text" value="Java、PHP">

 

サンプル[1]の色分け。まず、全てのフィールドの背景を水色に指定します。次にタイプの違うtype="password"の背景をグレーに、disabled="disabled"の背景をピンクに、readonly="readonly"の背景を薄い黄色にしています。

サンプル[1]のCSSソース

 .sample01 input[type="text"] ,.sample01 input[type="password"]  {
	width:15em;
	font-size:15px;
	padding:2px 5px;	
	border:1px solid #708090;
	background:#aff;	
	}
 .sample01 input[type="password"]  {
 	background:#eee;
	}	
 .sample01 input[type="text"]:disabled {
	background:pink;
	}
 .sample01 input[readonly="readonly"] {
	background:#f0e68c;
	}

 

サンプル[1]

(1)ユーザーID:
(2)パスワード:
(3)住所:
(4)メールアドレス:
(5)お名前:
(6)情報1の内容:

上記の例では、最初に全てに同じ背景色を付け、タイプや属性ごとに背景色を変え、最後に無指定の背景色を残すというかたちを取っていますが、サンプル[2]では、最初に背景色を付けず、無指定の背景色は最後に付けるというかたちにしました。

この場合、type="password"の背景をグレーに、disabled="disabled"の背景をピンクとした後に、input[type="text"]:enabledで、書き込み可能なフィールドの背景色を付け、その次にinput[readonly="readonly"]の背景色を変える、というのが分かりやすいのですが、input[readonly="readonly"]よりもinput[type="text"]:enabledの指定の方が優先するようで、順序を変えても変更できません。

そこで、次のように、:not()擬似クラスを使って、タイプがtextで、disabledでなく、readonlyでもないものの背景色を水色としています。

 

サンプル[2]のCSSソース

 .sample02 input[type="password"]  {
    background:#eee;
    }	
 .sample02 input[type="text"]:disabled {
    background:pink;
    }
 .sample02 input[readonly="readonly"] {
    background:#f0e68c;
    }
 .sample02 input[type="text"]:not([readonly="readonly"]):not([disabled="disabled"]){
    background:#aff;
    }

 

サンプル[2]

(1)ユーザーID:
(2)パスワード:
(3)住所:
(4)メールアドレス:
(5)お名前:
(6)情報1の内容:

 

戻るボタン