@Raneto4ka

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

5d1efa302e777867100075.png

Нужно сверстать такой выпадающий список. То есть надо вставить иконки и будет еще какая-то разметка внутри тега option.
На сайте подключен Bootstrap и плагин jQuery Nice Select, но они не дают возможности вставлять в тег option что-то ещё кроме текста. Была идея использовать бутстраповский dropdown, немного его допилив. Но, наверняка, есть ещё более разумные варианты такое запилить.
Буду благодарна за все идеи.
  • Вопрос задан
  • 469 просмотров
Пригласить эксперта
Ответы на вопрос 2
Chefranov
@Chefranov
Новичок
Сделайте на основе списка ul
Ответ написан
Комментировать
@KolesnikovVue
Junior Frontend Developer (Vue.Js)
К сожалению стандартные теги select и options не поддаются столь гибкой кастомизации.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы