CSSのfocus

今回はCSS 疑似クラスのfocusを利用し、通常のフォームにひと手間加えて、

ちょっとした変化をさせてみようと思います！

通常フォームを作る際の記述は、

<form method="post" action="ken.cgi">

<p><input type="text" name="name" size="30" /></p>

<p><textarea name="anq" /></textarea></p>

<p><input type="submit" value="送信" /></p>

</form>

input.fcs { width: 150px; }
textarea { width: 150px; height: 50px; }

このような感じになります。

focusさせると



このようにテキスト入力欄にカーソルが入るだけです。

そこで今回は疑似クラスのfocusを使用して、テキスト入力欄に

カーソルを入れたら(focusされたら)背景色を付けるようにしてみます！

それでは、foucs時に背景色を付けるためにHTML・CSSに

記述を追加します！

<p><input type="text" name="name" size="30" class="fcs" /></p>


input.fcs { width: 150px; }
textarea { width: 150px; height: 50px; }
input:focus, textarea:focus { background-color: #fa9; }

出来上がりは特に変わりませんが、focusすると…



このようにfocusを使い、入力欄の背景色を付けることができました。
 

色を付けることによりフォームの印象も変わります。

フォームを作成する際、ひと手間加えてみてはいかがでしょうか！！