jquery.nice-select.jsを使ってselectタグ要素をカスタイマイズ表示する方法 DAD UNION

jquery.nice-select.jsを使ってselectタグ要素をカスタイマイズ表示する方法をご紹介します。
selectタグは見た目の調整やカスタイマイズが難しいですがこれを使うと簡単に出来ます。

Contents

jquery.nice-select.jsを使ってselectタグ要素をカスタイマイズ表示するCSSの記述
jquery.nice-select.jsを使ってselectタグ要素をカスタイマイズ表示するHTMLの記述
jquery.nice-select.jsを使ってselectタグ要素をカスタイマイズ表示するJavaScriptの記述
jquery.nice-select.jsを使ってselectタグ要素をカスタイマイズ表示するデモページ
ソース元：jQuery Nice Select

jquery.nice-select.jsを使ってselectタグ要素をカスタイマイズ表示するCSSの記述

※nice-select.cssファイルを読み込みます。.selareaはカスタマイズするselectタグを囲むタグ要素です。必要に応じて変更して下さい。

<link rel="stylesheet" href="./nice-select.css">
<style>
body {
  margin: 20px 10px;
  padding: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
.selarea{
  width: 200px;
  margin: 0 auto;
}
</style>

jquery.nice-select.jsを使ってselectタグ要素をカスタイマイズ表示するHTMLの記述

※selectタグ要素に複数のoptionを用意します。必要に応じて変更して下さい。

<h1>jquery.nice-select.jsを使ってselectタグ要素をカスタイマイズ表示</h1>

<div class="selarea">
<select>
  <option data-display="選択してください">選択してください</option>
  <option value="JavaScript">JavaScript</option>
  <option value="jQuery">jQuery</option>
  <option value="PHP" disabled>PHP</option>
  <option value="CSS">CSS</option>
  <option value="HTML">HTML</option>
  <option value="WordPress">WordPress</option>
  <option value="EC-CUBE">EC-CUBE</option>
  <option value="npm-scripts">npm-scripts</option>
</select>
</div>

jquery.nice-select.jsを使ってselectタグ要素をカスタイマイズ表示するJavaScriptの記述

※jquery-2.1.4.min.js、jquery.nice-select.jsファイルを読み込みます。$(‘selectタグ要素’).niceSelect()を記述します。

<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.nice-select.js"></script>
<script>
$(document).ready(function() {
  $('select').niceSelect();
});
</script>