入力中のフォームの色を変える | Webデザイン講座のオシャレチップス

フォームのどこを入力しているのかを色という手段で表現できるとユーザビリティが高まります。input属性をスタイルシートで装飾します。 <input type="text" style="background-color:#ffffff"> ブラウザで表示するとこんな感じになります。 これだけじゃ、もちろん色が変わるわけがありません。次にJavaScriptのイベントハンドラで背景色を指示していきます。 ここで使うのはonFocusとonBlurの2つです。onFocusというのはフォームを選択されたとき、onBlurというのはフォームを選択したあとで他のフォームに選択されたときを 示しています。 <input type="text" style="back ground-color:#ffffff" onFocus="this.style.backgroundColor='#ffcc3

[vv_boow_vv]

　JavaScriptのイベントハンドラで背景色を指示していきます。