Developing software in the Real World

Styling a Chosen select to fit Bootstrap 3 better

One project that I’m currently working on is an internal business application that’s using stock Bootstrap 3. I needed a searchable select box and Chosen fitted the bill, so I’m using that.

However, the default styles for the Chosen select box differ slightly from Bootstrap. The most noticeable being the height of the control.

To fix this, I added this CSS:

A also noticed that a focussed Bootstrap 3 element has a blue outline, but the Chosen select doesn’t. To fix this, I added:

Before:
Chosen before

After:
Chosen after

Update: Brian Ridley pointed me at bootstrap-chosen which is much more comprehensive.