BLOG

24年新卒 WEBデザイナー募集中 中途 WEBデザイナー募集中 24年新卒 WEBエンジニア募集中

[ jQuery ] select要素(プルダウン・セレクトボックス)を装飾する easyselectboxの使い方

更新日:2018/06/26

デザインされたフォームを設置したいとき、select要素(プルダウン・セレクトボックス)の装飾はcssだけではなかなかうまくいきません。
背景や枠線をいじってみても、ボタンのところを装飾するのは普通の方法ではうまくいかないようです。

select要素の装飾用に作成されたjQueryのプラグインはいくつかありますが、
その中で使いやすかった「easyselectbox」を紹介します。

例えば、次のようなデザインのプルダウンを作りたいと思います。
select-box


まず、通常のプルダウンです。


これをcssで装飾してみましょう。
例えばこんな感じです。

css


通常の css だけではここまでしか対応ができませんので、easyselectbox.js を利用します。

使い方はとても簡単です。
パッケージ内にある easyselectbox.min.js を読み込み、装飾したいプルダウンを指定して jQuery を動かすだけです。
例えば、以下のように書きます。

html

ダウンロードしたパッケージ内には、使い方のサンプルを載せたhtmlもついているので、使いやすいと思います。
ちなみに、パッケージに入っている画像やcssをそのまま利用するとこんな感じです。


css に手を加え、最初に意図したデザインに変更するとこうなります。

css


他にもオプションを指定するだけでいくつかの効果が付与できるように作られているので、いろいろやってみると良いかもしれません。

スライドして出てくるオプション



南本貴之

FOLLOW US