入力状態のフィールドにスタイルを適用する

入力状態のフィールドだけスタイルを変更する

フォームの中で今どこを入力しているかを視覚的に分かりやすくするために、擬似クラス「:focus」を使って入力状態のときだけCSSを適用することができます。

CSS コード例

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=search]:focus,
input[type=url]:focus,
textarea:focus {
	color: #003a6c;
	background-color: #d9f6ff;
}

IEシリーズを含めて主要なブラウザは全て対応しているため、ブラウザによる差異を気にせず使用することができます。