Как правильно сверстать такой селект?

Question

[smurzak3]

Здравствуйте, мне нужно сверстать вот такой select. Через стандартный html select не получится, т.к он не кастомизируется так как мне надо. Пробовал искать кастомные селекты, но они не подходят. Можете подсказать как это можно сверстать?

Comments

[iBird Rose]

начнем с того, что тебе не обязательно его через select делать. если не умеешь - делай обычный dropdown (примеров в нете куча) и, к примеру, через input.radio сделай переключение. там будет пару строк на js, чтобы при выборе менялась кнопка дропдауна.
вот первый попавшийся пример о чем я https://codepen.io/pearsonc/pen/fltux

[Ankhena]

Можете подсказать как это можно сверстать?

Так и сверстать, хотите div'ами, хотите списком.
Потом получаете значение выбранного элемента и дальше либо просто аяксом отправляете куда надо либо передаете в нужное поле формы. Примеры реализации гуглятся по запросу "кастомный select".

Answer 1

[profesor08]

improved-select - заверстай свой макет и расставь дата атрибуты, а остальным займется либа.

Answer 2

[zombtron]

https://jsfiddle.net/x75zLn2a/
вот вам каркас. Стилизуйте и напичкайте данными.
Стилизоваться оно должно как угодно, ибо там обычные дивы.
Инпут скрытый я добавил для того, чтобы не колдовать с отправкой из формы - все по фен-шую, стандартный инпут с name и value.
Нейм у инпута - это нейм предполагаемого селекта, data-value у дивов - value у option.
Все свистелки вставляются в div.opt

Еще завтыкал сделать сворачивание при выборе и при клике вне селекта.
И нужно еще добавить позиционирование/размеры, чтобы при открытии оно накрывало то, что снизу, а не сдвигало.
Я думаю, понятно, что и как. Если нет, обращайтесь, подскажу.

upd:
https://jsfiddle.net/zombotron/gakqoz2t/3/
Добавил, что забыл + управление кнопками клавиатуры.
Конечно жестко велосипедно, зато без кучи зависимостей, что позволяет довольно шустренько работать на слабом ноуте.

+ есть небольшие костыли. Но я не претендую на универсальность решения. Это скорее просто алгоритм.