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

投稿日:2013年11月28日

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

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

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


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


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

css


.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


・・・
  <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


.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(/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;
}


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

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


  $('.design-select-box').easySelectBox({speed:200});



南本貴之

関連記事

カテゴリー: JavaScript, jQuery, WEB, サイト制作
  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル