[CSS] 選択したフォームパーツの色を変える方法

[CSS] 選択したフォームパーツの色を変える方法

マウスでクリックなどして選択したフォームオブジェクトの色を変える方法。
詳細は以下から。

選択したフォームパーツの色を変える方法

CSS(スタイルシート)で以下の様に指定します。

input {
	border:　1px solid #cccccc;
	background-color:　#ffffff;
}
input:focus {
	border:　1px solid #ff0000;
	background-color:　#ff9999;
}

上記方法だとinputタグ全般にかかってしまうので、特定のinputタグ(type=text)に指定したい場合は下記の様に記述します。

input[type="text"] {
	border:　1px solid #cccccc;
	background-color:　#ffffff;
}
input[type="text"]:focus {
	border:　1px solid #ff0000;
	background-color:　#ff9999;
}

また、テキストエリア(textarea)に適用したい場合は下記の様に記述します。

textarea {
	border:　1px solid #cccccc;
	background-color:　#ffffff;
}
textarea:focus {
	border:　1px solid #ff0000;
	background-color:　#ff9999;
}

どの記述方法もidやclassで指定することも可能です。

関連記事