フォームの入力エリアをクリックすると、入力エリアの背景色が変更されたり、枠線の色が変更されたりと、フォームにひと工夫付け加えているサイトを目にする事があるかと思います。
これは:focusという擬似クラスをつけることにより、入力エリアにフォーカスが当たる際の背景色とボーダーの変更を可能にしています。

スポンサーリンク

擬似クラス:focusがつけられるのは、

input
textarea
select

とありますが、自分的にはテキスト入力の補助と考えているので、inputとtextareaにつけるようにしています。

サンプルページを表示

css

input[type="text"],
textarea {
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    box-shadow: 1px 1px 1px #CCCCCC inset;
    margin-bottom: 4px;
    padding: 6px;
    width: 500px;
    outline: none;
}

input[type="text"]:focus,
textarea:focus {
	border: solid 1px #1CA8DD;
	background-color: #DDF2FA;
}

textarea {
	height: 160px;
}

inputの場合、input:focusとしてしまうとinputタグすべてにフォーカスがあたることになってしまいます。
指定した部分にフォーカスをあてるときは、type指定をしてあげると間違いがありません。
(例…input[type=”text”]:focus とすると type=”text” 以外では適用されません。)

同時に、outline:none も指定してあげるとよいと思います。

なお、IE7は未対応になっています。

ですが、focusが効かない事によって、サイトのデザインが崩れるとか、formが効かなくなるという不具合は恐らく無いので、ユーザー数を配慮してIE7のみfocusが効かなくても場合によってはいいのかなと思ってます。

PAGE TOP