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;
}

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