Как реализовать нужное мне дизайн у select?

Question

[Полина Емельянова]

Здравствуйте уважаемые коллеги.

Прошу помогите решить задачу:
Сабж - есть несколько селектов которые надо стилизовать. Это не проблема, CSS пашет!

ЗАДАЧА - реализовать "заголовок" селекта. Т.е. Если у нас какие-то категории, то первым надо сделать текст "Выбрать категории", задать фонту цвет, и бэкграунд, предположим.
- дизайн.

При этом у option стили должны быть свои.

ВОПРОС: Как это сделать? Я не нагуглила ни одного внятного ответа на этот вопрос. JS - не хочу. Т.к. это ни разу не выход. Если есть способ хотя бы отстилизовать заголовок - будет здорово.

Покурить код
https://codepen.io/emelyanova/pen/ZKNeXd

Заранее СПАСИБО!!!

Answer 1

[iBird Rose]

либо готовые плагины типа https://silviomoreto.github.io/bootstrap-select/ex...
либо самому на основе готового select выстроить его копию из дивов.

а все потому что select такой элемент, стили дропдауна которого идут не из браузера, а из ОС. и поэтому повлиять на них из браузера не представляется возможным.

Comments

[Полина Емельянова]

договорилась с заком и дизаГнером - заголовок вынесли из селекта вообще.))))

НО ваш вариант покурила - КРУТО!!! поклон!

Answer 2

[Максим]

Использовал .select2() под jQuery для такой задачи