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 anything wrong? I simply invoked the select boxes using
$('#select-input').chosen(); right?

Answer 1

Actually, there is someone who created a Bootstrap 3.0 CSS theme for Chosen.

Some screens:

The theme is available in this Github issue Use Gist below.

---

Edit

I've created a Fiddle using the same HTML as the official Chosen documentation page with the Bootstrap theme applied. (added form-control to all selects and removed style="width:350px;")

And also, I'll be maintaining the theme in this gist: https://gist.github.com/koenpunt/6424137

Answer 2

An alternate stylesheet for Chosen 1.0. This one is supposed to integrate better with Bootstrap 3.0.

Available here http://alxlit.github.io/bootstrap-chosen/

Answer 3

There is also another alternate theme supports Bootstrap 3 here https://github.com/dbtek/chosen-bootstrap.

Looks like native bs inputs.

Answer 4

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

  <link rel="stylesheet" href="bootstrap3/bootstrap-3.0.0-wip/dist/css/bootstrap.css">
  <link rel="stylesheet" href="docsupport/style.css">
  <link rel="stylesheet" href="docsupport/prism.css">
  <link rel="stylesheet" href="chosen.css">
  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
  </style>

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

Answer 5

If you want to change the select box sizes to be responsive you can use:

[class*="col-"] .chosen-container {
    width:98%!important;
}
[class*="col-"] .chosen-container .chosen-search input[type="text"] {
    padding:2px 4%!important;
    width:90%!important;
    margin:5px 2%;
}
[class*="col-"] .chosen-container .chosen-drop {
    width: 100%!important;
}

Source : https://github.com/harvesthq/chosen/issues/1004