Как сделать с помощью плагина select 2, два селекта с разными стилями?

Question

[pirojok_yoyo]

HTML разметка

<select class="select" id="select">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
</select>

<select class="header-select" id="header-select">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
</select>

Инициализирую оба селекта

$(document).ready(function() {
	$(".select").select2();
});
$(document).ready(function() {
	$(".select-header").select2();
});

застилил один селект через CSS, а второй принимает все его стили сразу же.
Проблема в том что моя разметка селекта скрывается и плагин добавляет свою, как можно добавить свой класс в эту разметку плагина? Подскажите может как то по другому инициализировать их нужно?

Answer 1

[justdealman]

Самый простой вариант — каждый селект обернуть в див и внутри уже оперировать стилями.

Comments

[pirojok_yoyo]

Все вроде бы хорошо, я даже удивился что не додумался до такого простого решения, но проблемка с выпадающим списком, когда селект раскрывается то в разметке он появляется в самом низу документа.
joxi.ru/p27ROe7CqeWlm7

[justdealman]

Слушать событие select2:open, добавлять к .select2-container новый класс в зависимости от того из какой обертки произошел вызов. Учитывая, что два селекта одновременно не могут быть открытыми, а при закрытии дропдаун дестроится, проблем не должно возникнуть.

Answer 2

[pirojok_yoyo]

Все разобрался, нужно стилить по айдишнику, justdealman спасибо, натолкнули на решение))