molog

アクセスカウンタ

zoom RSS セレクトボックスにデザインをあてる[jQuery]

<<   作成日時 : 2010/01/22 20:36  

トラックバック 0 / コメント 0

HTMLのセレクトボックスは、CSSではほとんどスタイルがあてられないので
デザイン重視なサイトを作成する際にこちらを使用させていただきました。

jQuery.selectable.js

セレクトボックスを拡張するjQueryベースのライブラリです。

プルダウンの表示形式を「selectable」または「simpleBox」から選択できますが
今回はプルダウンにデザインを当てるだけのsimpleBoxを使いました。


▽画像の用意
select_right.gif
select_right.gif

select_left.gif
select_left.gif

▽CSS調整
セレクトボックスの大きさなど
skin/base.css

プルダウンの背景色やテキスト色など
skin/natural/style.css または skin/selectable/style.css


sample
こんな感じになりました。


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

テーマ

関連テーマ 一覧


月別リンク

セレクトボックスにデザインをあてる[jQuery] molog/BIGLOBEウェブリブログ
文字サイズ:       閉じる