検索機能付き選択リスト「Chosen」のカスタマイズ

Chosenは検索機能付き選択リストを実装できるjQueryプラグインです。こんな感じの選択リストを使えるようになります。

リスト数が多い選択リストなどですごく便利で気に入っているのですが、他の選択リストと並べたときにデザインの違いが気になることがあります。

CSSなどでカスタマイズできないかなと調べていたらこちらのブログで紹介されていました。

Styling a Chosen select to fit Bootstrap 3 better | Rob Allen

次のようなCSSで高さや角丸めなど変更できるみたいです。

.chosen-container-single .chosen-single {
    height: 30px;
    border-radius: 3px;
    border: 1px solid #CCCCCC;
}
.chosen-container-single .chosen-single span {
    padding-top: 2px;
}
.chosen-container-single .chosen-single div b {
    margin-top: 2px;
}

こんな感じにカスタマイズできました。

リンク

• Salesforce - 検索機能付き選択リストを実装できるjQueryプラグイン Chosen を試してみました - Qiita