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）情報１の内容：</dt><dd><input name="f" type="text" value="Java、PHP">

 

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

サンプル［１］の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;
	}

 

サンプル［１］

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

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

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

 

サンプル［２］の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;
    }

 

サンプル［２］