How to change the class chosen for themselves?

Hi all. set yourself chosen, everything works fine, but I want to make your class chosen1 to edit other select's( for example, to align where the text in the center, but somewhere on the left side and not only). I changed the class='chosen' and class='chosen1', in the file chosen.jquery changed all of the values for chosen1, prescribed jQuery(document).ready(function(){jQuery(".chosen1").chosen(changed to сһоѕеп1)();});, everything works, but if I change the parameter( changed to chosen1, then nothing happens.
chosen
September 19th 19 at 00:25
1 answer
September 19th 19 at 00:27
Solution
Why change it?? Leave everything as it was!
<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});


If You want to css to kastomiziruet your chosen you can do the following
<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>
Class everywhere is prescribed chosen. I wrote chosen-1, $(".chosen-1").chosen({options_set_1}); but stil not working. Code style
.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
Thank you! Help! - buck commented on September 19th 19 at 00:33

Find more questions by tags JavaScript