0

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

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

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

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

 

DEMO

 

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

 

HTMLを記述

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

 CSSを記述

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

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

 

以上で完成です。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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