@Raneto4ka

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

5d1efa302e777867100075.png

Нужно сверстать такой выпадающий список. То есть надо вставить иконки и будет еще какая-то разметка внутри тега option.
На сайте подключен Bootstrap и плагин jQuery Nice Select, но они не дают возможности вставлять в тег option что-то ещё кроме текста. Была идея использовать бутстраповский dropdown, немного его допилив. Но, наверняка, есть ещё более разумные варианты такое запилить.
Буду благодарна за все идеи.
  • Вопрос задан
  • 474 просмотра
Пригласить эксперта
Ответы на вопрос 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);
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
summer Ярославль
от 100 000 до 140 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
19 апр. 2024, в 22:48
100 руб./за проект
19 апр. 2024, в 20:43
20000 руб./за проект