デザインされたフォームを設置したいとき、select要素（プルダウン・セレクトボックス）の装飾はcssだけではなかなかうまくいきません。
背景や枠線をいじってみても、ボタンのところを装飾するのは普通の方法ではうまくいかないようです。
select要素の装飾用に作成されたjQueryのプラグインはいくつかありますが、
その中で使いやすかった「easyselectbox」を紹介します。
例えば、次のようなデザインのプルダウンを作りたいと思います。
まず、通常のプルダウンです。
これをcssで装飾してみましょう。
例えばこんな感じです。
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .select-box { background: #FFFDF4; border: 2px solid #D2BA85; border-radius: 5px; color: #0C2245; font-size: 14px; height: 30px; line-height: 30px; text-align: left; text-indent: 5px; vertical-align: middle; width: 140px; } |
通常の css だけではここまでしか対応ができませんので、easyselectbox.js を利用します。
使い方はとても簡単です。
パッケージ内にある easyselectbox.min.js を読み込み、装飾したいプルダウンを指定して jQuery を動かすだけです。
例えば、以下のように書きます。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ・・・ <select class="design-select-box"> <option>選択しない</option> <option>水素</option> <option>ヘリウム</option> <option>リチウム</option> </select> ・・・ <script type="text/javascript" src="js/easyselectbox.min.js"></script> <script type="text/javascript"> (function ($) { $('.design-select-box').easySelectBox(); })(jQuery); </script> ・・・ |
ダウンロードしたパッケージ内には、使い方のサンプルを載せたhtmlもついているので、使いやすいと思います。
ちなみに、パッケージに入っている画像やcssをそのまま利用するとこんな感じです。
css に手を加え、最初に意図したデザインに変更するとこうなります。
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | .easy-select-box{ background: #fffdf4; border: 2px solid #d2ba85; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-align:left; font-size:14px; color:#0c2245; } .easy-select-box .esb-displayer{ background: url(/wp/wp-content/themes/brisk/before_2018/sample/img/select-box-arrow.png) no-repeat right top; color:#0c2245; cursor: default; height: 30px; line-height:30px; padding:0 3px; text-indent: 5px; width: 195px; } .easy-select-box .esb-displayer:hover { filter: alpha(opacity=80); -ms-filter: 'alpha(opacity=80)'; opacity: .8; } .easy-select-box:hover .esb-displayer{ text-decoration:none; } .easy-select-box.disabled .esb-displayer, .easy-select-box:hover.disabled .esb-displayer{ background-position: 0 -36px; } .easy-select-box .esb-dropdown{ background: #fff; border: 1px solid #ccc; display: none; max-height: 200px; overflow: auto; position: absolute; z-index: 999; width: 200px; } .easy-select-box .esb-item{ padding:3px; background:#fffdf4; color:#0c2245; cursor:default; } .easy-select-box .esb-item:hover{ background:#d2ba85; color:#FFFFFF; text-decoration:none; } |
他にもオプションを指定するだけでいくつかの効果が付与できるように作られているので、いろいろやってみると良いかもしれません。
スライドして出てくるオプション
1 2 3 | $('.design-select-box').easySelectBox({speed:200}); |
南本貴之
