読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

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

jQuery

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

f:id:tyoshikawa1106:20140830133402p:plain


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


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

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

f:id:tyoshikawa1106:20140830133725p:plain


次のような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;
}


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

f:id:tyoshikawa1106:20140830135032p:plain