フォームの入力チェックでエラーになったフィールドのスタイルを変える

入力にエラーがあるときはすぐ分かるようにする

フォームの入力フィールドは入力された値が正しい形式でない場合に、CSSで用意されている擬似クラスを使って特定のスタイルを適用することができます。

コード例

/* 入力エラーのスタイル */
input[type=text]:required,
input[type=email]:required,
input[type=email]:invalid,
textarea:required {
	color: #630015;
	border-color: #c20c33;
	background-color: #ffd9e1;
}

/* 入力値が正常な時のスタイル */
input[type=text]:valid,
input[type=email]:valid,
textarea:valid {
	color: #333;
	border-color: #ccc;
	background: #fff;
}

フォームの項目では次の3つの擬似クラスを使うことができます。

メールアドレスのような形式が決まっている場合のフィールドでは、入力値の形式をリアルタイムでチェックして値に問題がなければ「:valid」を適用、形式が正しくない場合は「:invalid」を適用します。

また、required属性が指定されているフィールドについては、値が未入力状態のときに「:required」が適用されます。

CSSに記述する順番については、エラー用の擬似クラス「:invalid」と「:required」に関する記述を前に、正常な場合の擬似クラス「:valid」を後ろに書く必要があります。