フォーカスしたフォームにエフェクトを加えたいとき

お問い合わせ入力フォームや検索フォームなどで、フォーム欄にフォーカスした際に背景色を変えるなどのエフェクトを加えたいときには、疑似クラスの「:focus」を利用します。これは、「:active」や「:hover」などと同じ「ダイナミック疑似クラス」のひとつです。

※IE6/7は「:focus」は未対応です。

DEMO

それでは見ていきましょう。

HTMLを記述

サンプルとして検索フォームを用意します。

<input type="text" value="" name="search" class="searchBox">

1	<input type="text" value="" name="search" class="searchBox">

CSSを記述

フォーカスが当たると背景色が変化するように指定します。

.searchBox {
	width:80%;
	height:30px;
	color:#FFF;
	padding:0 5px;
	background:#c8c2be;	/*背景色を指定*/
	border:1px solid #aaa;
}
.searchBox:focus{
	background:#008899;
}

.searchBox {

width:80%;

height:30px;

color:#FFF;

padding:0 5px;

background:#c8c2be; /*背景色を指定*/

border:1px solid #aaa;

}

.searchBox:focus{

background:#008899;

}

「.searchBox」というクラス名を付けたフォームに「:focus」で背景色「#008899」を指定しました。

以上で完成です。