フォームのインタフェースデザイン（2）

エ・ビスコム・テック・ラボ
2008-06-06 08:00:00
今回もフォームのインターフェースデザインに関連したセレクタを紹介していく。また、セレクタに未対応のブラウザにJavaScriptで対応する方法も紹介しよう。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

未対応のブラウザにも対応する - ユーザーのアクションに応じてフォームのデザインを変える場合

　前回紹介したフォームに対する:hoverや:focusの指定も、JavaScriptで設定することが可能だ。次のようなソースを利用すれば、:hoverなどに未対応のInternet Explorer 5以上でも、ユーザーのアクションに応じてフォームのデザインを変えることができる。

カーソルを重ねたテキストボックスの色を変える

　次のソースでは、onMouseOver属性でテキストボックスにカーソルを重ねたときの色を黄緑色に、onMouseOut属性でテキストボックスからカーソルを外したときの色を白色に設定している。

function white(obj){
obj.style.backgroundColor='white';
}

function green(obj){
obj.style.backgroundColor='greenyellow';
}




名前：



住所：
※ブラウザで表示を確認する

　ブラウザでの表示は次のようになる。

テキストボックスにカーソルを重ねた場合 テキストボックスにカーソルを重ねた場合
テキストボックスからカーソルを外した場合 テキストボックスからカーソルを外した場合

選択・入力中のテキストボックスの色を変える

　次のソースでは、onFocus属性で選択・入力中のテキストボックスの色を水色に、onBlur属性で選択を解除したときの色を白色に設定している。

function white(obj){
obj.style.backgroundColor='white';
}

function blue(obj){
obj.style.backgroundColor='skyblue';
}




名前：



住所：
※ブラウザで表示を確認する

　ブラウザでの表示は次のようになる。

テキストボックスを選択して文字を入力中の場合 テキストボックスを選択して文字を入力中の場合
テキストボックスの選択を解除した場合 テキストボックスの選択を解除した場合
  • 新着記事
  • 特集
  • ブログ