bootstrap-select のプルダウンの矢印を文字(▼)にする方法

概要

bootstrap-select を使ってて、プルダウン横の矢印が小さすぎるので、自分でサイズを指定したい、できたら font-size 指定したいなーと思ったので、やってみた。

環境

項目名 バージョン
bootstrap-select.js v1.2.2
Chrome v59.0.3071.115

やりかた

CSSをいじるだけ。
dropup は使ってないので、無視しています。

css
/* デフォルトの矢印を非表示にする */
.bootstrap-select.btn-group .dropdown-toggle .caret {
    display: none;
}
/* プルダウンの右端に▼を挿入する */
.bootstrap-select.btn-group .btn .filter-option:after {
    content: '▼';
    font-size: 20px;
    float: right;
}
[紹介元] CSSタグが付けられた新着投稿 – Qiita bootstrap-select のプルダウンの矢印を文字(▼)にする方法

関連記事