Как реализовать такой select?

Question

[Raneto4ka]

Нужно сверстать такой выпадающий список. То есть надо вставить иконки и будет еще какая-то разметка внутри тега option.
На сайте подключен Bootstrap и плагин jQuery Nice Select, но они не дают возможности вставлять в тег option что-то ещё кроме текста. Была идея использовать бутстраповский dropdown, немного его допилив. Но, наверняка, есть ещё более разумные варианты такое запилить.
Буду благодарна за все идеи.

Comments

[FeST1VaL]

Это кастомный select, т.е ты по сути убираешь нафиг стандартный и просто верстаешь с помощью JS.

Answer 1

[Eugene Chefranov]

Сделайте на основе списка ul

Answer 2

[Юрий Колесников]

К сожалению стандартные теги select и options не поддаются столь гибкой кастомизации.

Это можно сделать достаточно легко с помощью div'ов и Vue.js. Быстро набросал вариантик:
https://codepen.io/kolesnikovcode/pen/jjvZyJ

Вообще ничего сложного, можно это сделать и не прибегая к помощи больших фреймворков, например используя jQuery скрывать или отображать обертку для дропдаун меню по нажатию на блок "choose a question...", а стрелочке сбоку можно давать или убирать класс, в котором прописан transform: rotate(180deg);