Как заменить стандартный select на кастомный?

Question

[Михаил Юматов]

Как заменить код стандартного select на кастомный, что бы его можно было потом стилизовать.
Например, в html файле структура стандастная:

<select>
<option value="1">Параметр 1</option>
<option value="2">Параметр 2</option>
<option value="3">Параметр 3</option>
</select>

А уже в браузере js (jquery) ее переделал в что то такое:

<div class="select">
<span class="select_value">Параметр 1</span>
<ul class="select_dropdown">
<li class="select_option">Параметр 1</li>
<li class="select_option">Параметр 2</li>
<li class="select_option">Параметр 3</li>
</ul>
</div>

Плагины использовать не хочу, так как они слишком нагруженные, а мне нужно стилизовать 1 селект на сайте.

Comments

[Andrey Suha]

Вы ждете готовое решение или просто хотите понять в каком направлении двигаться?

[Михаил Юматов]

Andrey Suha, хотите готовое решение приготовить, готовьте. Если подскажите куда двигаться тоже хорошо.

[Михаил Юматов]

Andrey Suha, Может лучше реализовать подобие селекта сразу на этой разметке?

<div class="select">
<span class="select_value">Параметр 1</span>
<ul class="select_dropdown">
<li class="select_option">Параметр 1</li>
<li class="select_option">Параметр 2</li>
<li class="select_option">Параметр 3</li>
</ul>
</div>

[Andrey Suha]

Михаил Юматов, уже наготовился. По сути выбираете все опшины в селект из них получаете значения по ним строите лист итемов и вставляєте в остальную верстку селекта, определяете момент когда ваш кастомнный селект должен сгенерировать событие change и в этот момент вызывает change на селекте, потомстандартный селект может скрыть и после него вставить свою вёрстку. В общем случае это выглядит как-то так

[Andrey Suha]

Михаил Юматов, ну если Вам не обязательно что бы оставался стандартный например для отлавливания события change на нем то да лучше

Answer 1

[SANTA2112]

https://jsfiddle.net/tf8jc9rm/

Comments

[Одиночка Айс]

Угу, только еще бы input hidden добавить, дабы не потерять значение при отправке формы.