[jQuery] Select2 の選択ボックスの文字列のスタイルをカスタマイズする
ロゴ
「Web 開発」に関連する記事一覧

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

2019/02/25
JavaScript HTML 

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>
  


  このエントリーをはてなブックマークに追加    

<<「Web 開発」の記事一覧に戻る

関連記事

にほんブログ村 ゲームブログ ファイアーエムブレムへ にほんブログ村 デザインブログ コンピュータグラフィックスへ

0.062 sec
Copyright(C)2006-2019 puarts All Rights Reserved