[jQuery] Select2 の選択ボックスの文字列のスタイルをカスタマイズする

2019/02/25
(この記事の文字数: 391)

Select2 を使って選択ボックスをカスタマイズしていたのですが、標準のフォントサイズが大きすぎるのでフォントサイズやスタイルを変えたかったのですが、変える方法が簡単にわからなかったのでメモしておきます。以下のサイトを参考にさせていただきました。

https://stackoverflow.com/questions/34299971/change-default-font-of-select2

以下のスタイルをカスタマイズすると選択ボックスと各オプション文字列を上書きできるようです。

<style>
    .select2-selection__rendered {
        font-size: 12px;
    }

    .select2-results__options {
        font-size: 12px;
    }
</style>

以下がサンプルの実行結果です。

以下が上記サンプルのソースコードです。jQueryとSelect2はCDN版を使っているので必要に応じて変えてください。スタイルシートをbodyでリンクしているのでブラウザによっては動かないものがあるかもしれませんが、chromeではコピペすれば動作すると思います。

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<style>
    .select2-selection__rendered {
        font-size: 12px;
    }

    .select2-results__options {
        font-size: 12px;
    }
</style>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class='test'></select>
<script>
    var inputData = [
        { id: 0, text: 'hoge' },
        { id: 1, text: 'fuga' },
        { id: 2, text: 'piyo' },
    ];

    $('.test').select2({
        data: inputData,
        width: 100,
    });
</script>