BLOG ブログ

ホームページ制作
BLOG
[ jQuery ] select要素（プルダウン・セレクトボックス）を装飾する　easyselectboxの使い方

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

更新日：2018/06/26

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

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

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

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

これを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;
}

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

・・・

<option>選択しない</option>

</select>

・・・

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

.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;

}

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

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


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

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

南本貴之

一覧へ戻る

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

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ

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

FOLLOW US 最新の情報をお届けします

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ

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