セレクトボックスにデザインをあてる[jQuery]
HTMLのセレクトボックスは、CSSではほとんどスタイルがあてられないので
デザイン重視なサイトを作成する際にこちらを使用させていただきました。
jQuery.selectable.js
セレクトボックスを拡張するjQueryベースのライブラリです。
プルダウンの表示形式を「selectable」または「simpleBox」から選択できますが
今回はプルダウンにデザインを当てるだけのsimpleBoxを使いました。
▽画像の用意

select_right.gif

select_left.gif
▽CSS調整
セレクトボックスの大きさなど
skin/base.css
プルダウンの背景色やテキスト色など
skin/natural/style.css または skin/selectable/style.css

こんな感じになりました。
・背景を画像に変更
・プルダウン時にアニメーションをつける
・プルダウン部分のカラーを変える
といったことが簡単にできるので便利です。
デザイン重視なサイトを作成する際にこちらを使用させていただきました。
jQuery.selectable.js
セレクトボックスを拡張するjQueryベースのライブラリです。
プルダウンの表示形式を「selectable」または「simpleBox」から選択できますが
今回はプルダウンにデザインを当てるだけのsimpleBoxを使いました。
▽画像の用意

select_right.gif

select_left.gif
▽CSS調整
セレクトボックスの大きさなど
skin/base.css
プルダウンの背景色やテキスト色など
skin/natural/style.css または skin/selectable/style.css

こんな感じになりました。
・背景を画像に変更
・プルダウン時にアニメーションをつける
・プルダウン部分のカラーを変える
といったことが簡単にできるので便利です。