Как изменить класс chosen под себя?

Question

[Hello World]

Всем привет. установил себе chosen, всё хорошо работает, но хочется сделать свой класс chosen1, чтобы отредактировать другие select's( например, выравнить где-то текст по центру, а где-то с левой стороны и не только). Я изменил class='chosen' на class='chosen1', в файле chosen.jquery изменил все значения на chosen1, прописал jQuery(document).ready(function(){jQuery(".chosen1").chosen(меняю на сhosen1)();});, вроде всё работает, но, если я изменяю параметр( меняю на chosen1, то ничего не получается.
chosen

Answer 1

[Alexander Sydorenko]

Зачем его менять?? Оставьте все как было!

<select class="chosen-select-1">
<select class="chosen-select-2">
<select class="chosen-select-3">
<select class="chosen-select-4">

$(".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});

Если Вы хотите в css кастомизирвать свои chosen то можете сделать следующее

<div class="supper-wrapper">    
    <select class="chosen-select-1">
</div>

И в css коде написать

.supper-wrapper .chosen-container {
// и здесь переписать стили для этого .chosen-container который лежит в .supper-wrapper
}

.supper-wrapper .chosen-container * {
// и здесь переписать стили для этого .chosen-container  * который лежит в .supper-wrapper
}

// и.т.д для всех стилей которые Вы хотите изменить.

Добавив столько враперов сколько вам разных chosen понадобится. Таким образом Вы обрамляющим chosen контейнером сможете регулировать его стиль, делая его таким как Вам надо.

Comments

[Hello World]

Класс везде прописывается chosen. Я написал chosen-1, $(".chosen-1").chosen({options_set_1}); но стиль не работает. Код стиля
.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;
}

[Hello World]

Cпасибо! Помог!