Boostrapのセレクトボックスをかっこよくする

bootstrap-selectというライブラリを追加することで、セレクトボックスをデフォルトからBootstrapのボタンやドロップダウンを利用したスタイルに変更することができます。

利用方法

jQueryを利用しているのでjQueryとダウンロードしたjsファイルとcssファイルを読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/_inc/css/bootstrap-select.min.css">
<script src="<?php echo get_stylesheet_directory_uri(); ?>/_inc/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
        $(function(){
            $('.post_status').selectpicker({
                'selectedText': 'cat'
            });
        });
</script>

HTML

<select class="post_status" style="display:none;">
<option value='公開'>公開</option>
<option value='下書き'>下書き</option>
</select>

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