Bootstrap 3.0 theme for Chosen

chosen-bootstrap.css

select.form-control + .chosen-container.chosen-container-single .chosen-single {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    background-image:none;
}

select.form-control + .chosen-container.chosen-container-single .chosen-single div {
    top:4px;
    color:#000;
}

select.form-control + .chosen-container .chosen-drop {
    background-color: #FFF;
    border: 1px solid #CCC;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    margin: 2px 0 0;

}

select.form-control + .chosen-container .chosen-search input[type=text] {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    background-image:none;
}

select.form-control + .chosen-container .chosen-results {
    margin: 2px 0 0;
    padding: 5px 0;
    font-size: 14px;
    list-style: none;
    background-color: #fff;
    margin-bottom: 5px;
}

select.form-control + .chosen-container .chosen-results li , 
select.form-control + .chosen-container .chosen-results li.active-result {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333;
    white-space: nowrap;
    background-image:none;
}
select.form-control + .chosen-container .chosen-results li:hover, 
select.form-control + .chosen-container .chosen-results li.active-result:hover,
select.form-control + .chosen-container .chosen-results li.highlighted
{
    color: #FFF;
    text-decoration: none;
    background-color: #428BCA;
    background-image:none;
}

select.form-control + .chosen-container-multi .chosen-choices {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 6px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    background-image:none;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    height:auto;
    padding:5px 0;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-choice {

    background-image: none;
    padding: 3px 24px 3px 5px;
    margin: 0 6px 0 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    background-color: #FFF;
    border-color: #CCC;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    top:8px;
    right:6px;
}

select.form-control + .chosen-container-multi.chosen-container-active .chosen-choices,
select.form-control + .chosen-container.chosen-container-single.chosen-container-active .chosen-single,
select.form-control + .chosen-container .chosen-search input[type=text]:focus{
    border-color: #66AFE9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
}

select.form-control + .chosen-container-multi .chosen-results li.result-selected{
    display: list-item;
    color: #ccc;
    cursor: default;
    background-color: white;
}

Awesome! Thanks a lot!

When i put the dropdownlist in bootstrap tab. Then in first tab it works fine but in second, third and forth it does not.. I am not able to figure it out looks like css is breaking as both dropdown is same .. any fix for that?

@srkjain I have this issue as well on hidden containers with chosen inside and even on modals. It seems that chosen properly initialize when it is visible, and also broken on window resize if you are using some responsive templates.

What I did was to initialize/re-initialize (like destroy method) once the chosen is visible.

love it!!

Hello everyone, I want jquery code for multi select picklist which behaves like this:-

Any help would be much appreciated.

With Chosen v1.4.2 and Bootstrap v3.3.5, I need to add this for proper display of short elements (they showed some dots as the box was not wide enough).

.chosen-container-single .chosen-single span {
    margin-right: 0;
}

And great work, thank you @koenpunt.

Great!
Here's a version that uses bootstrap-sass (works for single select for now).

Nice work. What licence is this release under? I see you've released code before under MIT but I don't want to presume.

This is amazing! Thank you!

Really great! Love it!

Works fine! Thanks a lot!

Awesome muchos gracias

Thanks +1 :)

Great work!!

+1

Any word on a bootstrap 4.0 theme?

Thanks for this! 👍

thank you!

Thanks

It didn't work for me in a modal with Bootstrap v3.3.6 and Chosen v1.7.0.

I used:

• https://github.com/alxlit/bootstrap-chosen/blob/master/bootstrap-chosen.css
• Hack to pass the width in the initialization method: harvesthq/chosen#2822 (comment)

Awesome Thanks for this!

👍

Fine, Thanks men =D

I adapted this into a plugin a while ago and have improved upon it since. https://github.com/westonganger/chosen-bootstrap-theme

Thanks!

Thanks!

Thank you very much for your amazing work <3

Thanks!

Hello people...
I need use booptrap-chosen into a modal, but the content is loaded dinamic and don't work someone know and can teachme?
if the content is loaded from server this work but if I load my select with js it's don't work.
my problem is that i need load very much contacts and need that the people can select multiple on this select, but each query brings me different results, so I charge it from the js because I bring them with ajax.

this is my code, if someone can helpme, please.

function listarContactos(paketeContactos, tipo) {
    var multiple = '';
    var nombre = '';
    var dato = '';
    var clase ='';
    

    if (tipo) {
        multiple = 'multiple';
        nombre = 'excluidos';
        dato = "data-placeholder='Enviar correo a...'";
        clase='chosen';
    }
    var elemento=`
        <select `+multiple+` class='`+clase+`' name='contactos_`+nombre+`[]' `+dato+`  id='select_contactos_`+multiple+`'>
    `;
    console.log(paketeContactos);
    paketeContactos.forEach(element => {
        console.log(element)
        elemento+=`<option value='`+element.id+`/`+element.email+`'>`+element.nombre+`</option> `;
    });
    elemento+=`</select>`
    
    return elemento;
}

NOTE: sorry but my bad english but my natal lenguage is spanish, i hope you can understand me