BootStrap のセレクトボックスを格好良くする メモ

BootStrapでフォームにデザインあてると、セレクトボックスがデフォルトのままで
他のフォーム部品と同じようなデザインに出来ないかなと思って調べた時のメモです。

使用ライブラリ

Bootstrap-select

変更前と変更後

使用方法

前提として、jQueryが必要。

公式サイトにて、ライブラリをダウンロード。

その中から

・bootstrap-select.css　or bootstrap-select.min.css
・bootstrap-select.js or bootstrap-select.min.js

コピーして使用したいHTMLページに読む込むようにする。

<link rel="stylesheet" type="text/css" href="./bootstrap-select.css">
<script src="./bootstrap-select.js"></script>

次に、スクリプトを追加

<script type="text/javascript">
        $(window).on('load', function () {
            $('.selectpicker').selectpicker({
                'selectedText': 'cat'
            });
        });
</script>

上記のような使用準備が済んだら、セレクトボックスのclassにselectpickerとすると格好良くなる＾ー＾

<select class="selectpicker">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>