<select class="chosen-select-1">
</select>
<select class="chosen-select-3">
</select>
$(".chosen-select-1").chosen({options_set_1});
$(".chosen-select-2").chosen({options_set_2});
$(".chosen-select-3").chosen({options_set_3});
$(".chosen-select-4").chosen({options_set_4});
<div class="supper-wrapper">
<select class="chosen-select-1">
And in css code to write.supper-wrapper .chosen-container {
// and here to rewrite the styles for this .chosen-container which is .supper-wrapper
}
.supper-wrapper .chosen-container * {
// and here to rewrite the styles for this .chosen-container * which lies in .supper-wrapper
}
// etc for all styles You want to change.
Adding so many raperow different chosen how much you will need. So You frame the chosen container will be able to adjust his style to make it like You want.</select></div>
Find more questions by tags JavaScript
.chosen-container {
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 14px;
zoom: 1;
*display: inline;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.chosen-container * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.chosen-container .chosen-drop {
position: absolute;
top: 100%;
left: -9999px;
z-index: 1010;
width: 100%;
border-top: 0;
background: #F1F2F7;
font-size: 14px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}
.chosen-container.chosen-with-drop .chosen-drop {
left: 0;
}
.chosen-container a {
cursor: pointer;
}
/* @end */
/* @group Single Chosen */
.chosen-container-single .chosen-single {
position: relative;
display: block;
overflow: hidden;
background: #F1F2F7;
border: 1px solid #CCC;
color: #444;
text-decoration: none;
white-space: nowrap;
line-height: 30px;
padding: 0 3%;
}
.chosen-container-single .chosen-search {
position: absolute;
left: -99999px;
}
/* @end */
/* @group Results */
.chosen-container .chosen-results {
margin: 0;
padding: 4px 0;
}
.chosen-container .chosen-results li {
display: block !important;
border-top: 1px solid #F1F2F7;
border-bottom: 1px solid #F1F2F7;
line-height: 1.3;
padding-top: 3px;
padding-bottom: 3px;
text-align: left;
}
.chosen-container .chosen-results li.active-result {
display: list-item;
cursor: pointer;
}
.chosen-container .chosen-results li.highlighted {
background-image: linear-gradient(#2DBBFF, #2DBFFF);
color: #fff;
} - buck commented on September 19th 19 at 00:30