Skip to content

Instantly share code, notes, and snippets.

@koenpunt
Last active March 11, 2023 01:01
Show Gist options
  • Save koenpunt/6424137 to your computer and use it in GitHub Desktop.
Save koenpunt/6424137 to your computer and use it in GitHub Desktop.
Bootstrap 3.0 theme for Chosen
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;
}
@DanielCauser
Copy link

This is amazing! Thank you!

@martingebhardt
Copy link

Really great! Love it!

@AllanAndrade
Copy link

Works fine! Thanks a lot!

@pau1phi11ips
Copy link

Awesome muchos gracias

@bobsu78
Copy link

bobsu78 commented Nov 25, 2016

Thanks +1 :)

@fnta
Copy link

fnta commented Mar 7, 2017

Great work!!

@ZackStone
Copy link

+1

@kidbombay
Copy link

Any word on a bootstrap 4.0 theme?

@TrailHacker
Copy link

Thanks for this! 👍

@avithalker
Copy link

thank you!

@jaroslavlibal
Copy link

Thanks

@pihug12
Copy link

pihug12 commented Aug 21, 2017

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

I used:

@mcarpenterjr
Copy link

Awesome Thanks for this!

@roberthopman
Copy link

👍

@emanueljtc
Copy link

Fine, Thanks men =D

@westonganger
Copy link

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

@dmchristensen
Copy link

Thanks!

@aniltonjunior
Copy link

Thanks!

@khalidsgh
Copy link

Thank you very much for your amazing work <3

@muhannadshubita
Copy link

Thanks!

@jjrr13
Copy link

jjrr13 commented Jul 25, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment