JavaScript

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

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

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

※nice-select.cssファイルを読み込みます。その他、必要に応じて変更して下さい。

<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アナリティクスタグは流用しないで下さい。