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

自由が丘で働くWeb屋のブログ

[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で指定することも可能です。

 
カテゴリー:Webシステム開発
タグ:
2013年6月19日 17時37分
 

関連記事

 

コメントを書く

This blog is kept spam free by WP-SpamFree.

(C) 自由が丘で働くWeb屋のブログ
Get Adobe Flash player