Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
@omensinger

This comment has been minimized.

Copy link

@omensinger omensinger commented Sep 5, 2013

Great work, thank you very much!

@bendo01

This comment has been minimized.

Copy link

@bendo01 bendo01 commented Oct 2, 2013

Great work, thank you very much!

@craigh

This comment has been minimized.

Copy link

@craigh craigh commented Oct 8, 2013

thank you for this!

@cjxmccac

This comment has been minimized.

Copy link

@cjxmccac cjxmccac commented Oct 18, 2013

Thanks a lot for this, works great for my use case.

@ricardodovalle

This comment has been minimized.

Copy link

@ricardodovalle ricardodovalle commented Oct 21, 2013

Thanks :+1

@mranest

This comment has been minimized.

Copy link

@mranest mranest commented Oct 24, 2013

Excellent work; much appreciated!

@nmeirik

This comment has been minimized.

Copy link

@nmeirik nmeirik commented Nov 8, 2013

Great work! Do you have any plans to update it to support option groups as well? With your current style, they look exactly the same as the options themselves, which is not ideal.

@mantask

This comment has been minimized.

Copy link

@mantask mantask commented Nov 16, 2013

Absolutely amazing!

@esbanarango

This comment has been minimized.

Copy link

@esbanarango esbanarango commented Dec 12, 2013

Thanks man! :)

@vdkar

This comment has been minimized.

Copy link

@vdkar vdkar commented Dec 16, 2013

Coooooll

@Jermanis

This comment has been minimized.

Copy link

@Jermanis Jermanis commented Dec 22, 2013

Awesome!

@tubedude

This comment has been minimized.

Copy link

@tubedude tubedude commented Jan 24, 2014

Thanks. I've added these lines to give me input-sm and input-lg control over chosen:

select.form-control.input-sm + .chosen-container.chosen-container-single .chosen-single {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 30px;
}

select.form-control.input-lg + .chosen-container.chosen-container-single .chosen-single {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 46px;
}
@alexanderjulo

This comment has been minimized.

Copy link

@alexanderjulo alexanderjulo commented Jan 24, 2014

Would you consider to add support for grouped selects and multiselects?

@metaist

This comment has been minimized.

Copy link

@metaist metaist commented Jan 27, 2014

As far as I can tell, all you need to make <optgroup>s look nice is to add:

select.form-control + .chosen-container .chosen-results li.group-result { font-weight: bold; }
select.form-control + .chosen-container .chosen-results li.group-option { padding-left: 35px; }
@Xorlev

This comment has been minimized.

Copy link

@Xorlev Xorlev commented Jan 30, 2014

For input-group support:

.input-group select.form-control + .chosen-container-multi .chosen-choices {
    border-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.input-group select.form-control + .chosen-container-single .chosen-single {
    border-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.input-group select.form-control + .chosen-container .chosen-search input[type=text] {
    border-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
@jan-molak

This comment has been minimized.

Copy link

@jan-molak jan-molak commented Feb 13, 2014

Awesome work, thanks for that!

@pacoorozco

This comment has been minimized.

Copy link

@pacoorozco pacoorozco commented Apr 5, 2014

Great work, it works pretty well. I would suggest to include the magnifying glass icon on seach place for choosen. Thanks

@glaszig

This comment has been minimized.

Copy link

@glaszig glaszig commented Apr 10, 2014

i'd recommend the following to make the icon in a single select be positioned properly:

.chosen-container-single .chosen-single { 
  position: relative; 
}
.chosen-container-single .chosen-single abbr {
  top: 50%;
  margin-top: -5px;
  margin-left: -5px;
}
@markcarver

This comment has been minimized.

Copy link

@markcarver markcarver commented Apr 11, 2014

https://drupal.org/node/2133549

Would be great if someone could consolidate this (and comment code) into a single patch. It may be beneficial to replace some values with LESS Bootstrap variables (and possibly SASS).

@talofo

This comment has been minimized.

Copy link

@talofo talofo commented Apr 22, 2014

How can we apply this theme? Can anyone please provide more details about how can we implement this theme? Thanks in advance.

@jrobinsonuk

This comment has been minimized.

Copy link

@jrobinsonuk jrobinsonuk commented Apr 25, 2014

This is great, thanks! I found multi didn't match up in height so I removed 'padding' from

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

This comment has been minimized.

Copy link

@nestarz nestarz commented Apr 27, 2014

Thank you very much for your amazing work!

@Krinkle

This comment has been minimized.

Copy link

@Krinkle Krinkle commented May 27, 2014

See also the repository at https://github.com/alxlit/bootstrap-chosen

@epinorodriguez

This comment has been minimized.

Copy link

@epinorodriguez epinorodriguez commented Jun 11, 2014

Excelente trabajo! muchas gracias!

@joseph4tw

This comment has been minimized.

Copy link

@joseph4tw joseph4tw commented Jul 9, 2014

This is great! Many thanks!

@Alir3z4

This comment has been minimized.

Copy link

@Alir3z4 Alir3z4 commented Jul 22, 2014

Awesome ;)

@Ke-

This comment has been minimized.

Copy link

@Ke- Ke- commented Aug 18, 2014

For group result support:

select.form-control + .chosen-container .chosen-results li.group-result {
background: #EEE;
padding-left: 10px;
color: #AAA;
}

@patrykgruszka

This comment has been minimized.

Copy link

@patrykgruszka patrykgruszka commented Aug 28, 2014

Thanks, great work!
If you want LESS code with Bootstrap variables check my fork:
https://gist.github.com/patryk-gruszka/54697232270199d94c30
Also includes many fixes as input groups and sizes

@lexeek

This comment has been minimized.

Copy link

@lexeek lexeek commented Sep 19, 2014

Thank You!

@morrow95

This comment has been minimized.

Copy link

@morrow95 morrow95 commented Dec 19, 2014

Needed some changes for my needs... there is probably more code needed for other situations though.

bold the optgroup labels, pad them more to the left, and remove the highlight for them...

select.form-control + .chosen-container .chosen-results li.group-result,
select.form-control + .chosen-container .chosen-results li.group-result:hover
{
font-weight:bold;
color:#333;
text-decoration: none;
padding: 3px 10px;
background-color: #fff;
background-image:none;
}

remove the border radius when using an input group addon (font awesome icon on the left side of input)...

.input-group-addon + select.form-control + .chosen-container.chosen-container-single .chosen-single{
    border-radius: 0 4px 4px 0;
}
@stivaugoin

This comment has been minimized.

Copy link

@stivaugoin stivaugoin commented Mar 1, 2015

@patryk-gruszka thanks for less version!

@moritzpeikert

This comment has been minimized.

Copy link

@moritzpeikert moritzpeikert commented Mar 26, 2015

Awesome! Thanks a lot!

@srkjain

This comment has been minimized.

Copy link

@srkjain srkjain commented Apr 2, 2015

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?

@lysender

This comment has been minimized.

Copy link

@lysender lysender commented May 27, 2015

@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.

@pandyatama17

This comment has been minimized.

Copy link

@pandyatama17 pandyatama17 commented Jul 3, 2015

love it!!

@ooooak

This comment has been minimized.

Copy link

@ooooak ooooak commented Aug 17, 2015

Awesome

@divyanshubhushan

This comment has been minimized.

Copy link

@divyanshubhushan divyanshubhushan commented Oct 26, 2015

Hello everyone, I want jquery code for multi select picklist which behaves like this:-
mul
Any help would be much appreciated.

@tuanalumi

This comment has been minimized.

Copy link

@tuanalumi tuanalumi commented Nov 12, 2015

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.

@thecristen

This comment has been minimized.

Copy link

@thecristen thecristen commented Dec 28, 2015

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

@morty

This comment has been minimized.

Copy link

@morty morty commented Jan 19, 2016

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

@DanielCauser

This comment has been minimized.

Copy link

@DanielCauser DanielCauser commented Mar 21, 2016

This is amazing! Thank you!

@martingebhardt

This comment has been minimized.

Copy link

@martingebhardt martingebhardt commented Jun 23, 2016

Really great! Love it!

@AllanAndrade

This comment has been minimized.

Copy link

@AllanAndrade AllanAndrade commented Jul 9, 2016

Works fine! Thanks a lot!

@pau1phi11ips

This comment has been minimized.

Copy link

@pau1phi11ips pau1phi11ips commented Jul 21, 2016

Awesome muchos gracias

@bobsu78

This comment has been minimized.

Copy link

@bobsu78 bobsu78 commented Nov 25, 2016

Thanks +1 :)

@fnta

This comment has been minimized.

Copy link

@fnta fnta commented Mar 7, 2017

Great work!!

@ZackStone

This comment has been minimized.

Copy link

@ZackStone ZackStone commented Apr 17, 2017

+1

@kidbombay

This comment has been minimized.

Copy link

@kidbombay kidbombay commented May 19, 2017

Any word on a bootstrap 4.0 theme?

@TrailHacker

This comment has been minimized.

Copy link

@TrailHacker TrailHacker commented May 25, 2017

Thanks for this! 👍

@avithalker

This comment has been minimized.

Copy link

@avithalker avithalker commented Jul 22, 2017

thank you!

@jaroslavlibal

This comment has been minimized.

Copy link

@jaroslavlibal jaroslavlibal commented Aug 10, 2017

Thanks

@pihug12

This comment has been minimized.

Copy link

@pihug12 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

This comment has been minimized.

Copy link

@mcarpenterjr mcarpenterjr commented Sep 7, 2017

Awesome Thanks for this!

@roberthopman

This comment has been minimized.

Copy link

@roberthopman roberthopman commented Dec 19, 2017

👍

@emanueljtc

This comment has been minimized.

Copy link

@emanueljtc emanueljtc commented Feb 19, 2018

Fine, Thanks men =D

@westonganger

This comment has been minimized.

Copy link

@westonganger westonganger commented Feb 28, 2018

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

@darrylmc

This comment has been minimized.

Copy link

@darrylmc darrylmc commented Mar 8, 2018

Thanks!

@aniltonjunior

This comment has been minimized.

Copy link

@aniltonjunior aniltonjunior commented Jun 25, 2018

Thanks!

@khalidsgh

This comment has been minimized.

Copy link

@khalidsgh khalidsgh commented Mar 10, 2019

Thank you very much for your amazing work <3

@muhannadshubita

This comment has been minimized.

Copy link

@muhannadshubita muhannadshubita commented Apr 10, 2019

Thanks!

@jjrr13

This comment has been minimized.

Copy link

@jjrr13 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
You can’t perform that action at this time.