Chosen.js styling not conforming to Bootstrap3 styles

Question

Im using chosen.js v1.0 and am using it in my project with Bootstrap 3 but the styles of my select boxes are not conforming to bootstrap 3 styles at all.

Am I doing any

Answer 1

Chosen.js (chosen.css) and the bootstrap css both add CSS styles to your inputs (selects). Try to load chose.css after bootstrap.css:

After doing this see: Right border of the AddThis counter missing with Twitter's Bootstrap 3. It seems the CSS's universal selector to set box-sizing to border-box caused most of the trouble.

To fix this reset the box-sizing of the elements you apply chosen() on:

In the case of $('#select-input').chosen(); you will also set:

#select-input
{
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
}

NB by default chosen.js bundles an old version of jQuery. Twitter Bootstrap (javascript) requires the newest version (<2) of jQuery