JavaScript

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

jquery.nice-select.jsを使ってselectタグ要素をカスタイマイズ表示する方法をご紹介します。
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>

jquery.nice-select.jsを使ってselectタグ要素をカスタイマイズ表示するデモページ

jquery.nice-select.jsを使ってselectタグ要素をカスタイマイズ表示するデモページ

ソース元:jQuery Nice Select

以下がソース元です。
jQuery Nice Select

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。