Как можно задать css стиль для тега option?

Question

[realt]

Под словом "стиль" я имею ввиду не только background, а еще и границы, эффект при наведении и т.д...
В принципе мне в основном необходимо знать как границы поменять. (толщину, цвет...). Помогите пожалуйста.

Comments

[Иван Доброславин]

С помощью flexbox без использования js. Вот так: https://codepen.io/cssinate/pen/KVdYjz

Answer 1

[Евгений Петров]

У активного option вы не сможете ничего менять.
Как изменить фон выпадающего списка select'а, то есть фон option?

Answer 2

[Алексей Николаев]

Это невозможно, т.к. некоторые стили данного элемента управляются программно и могут различаться в различных браузерах.
Однако вы можете воспользоваться одним из jquery \ mootols плагинов для изменения внешнего вида форм и инпутов, или создать свой.

Answer 3

[Сергей]

Посмотрите jquery ui - jqueryui.com
Например вот: jqueryui.com/selectmenu/#custom_render
Цвета и стиль там настраиваются отдельно

Answer 4

[Анна Бакурова]

Мой любимый плагин по данной теме.

Comments

[Анна Бакурова]

Найдены баги! Не используйте!

[Denis Buryi]

Анна Бакурова: Использовал для выбора разных языков на сайте. Все работает.

[Анна Бакурова]

Denis Buryi: Вот сообщения отправленые автору плагина:

В плагине нашлось много багов, один из них описан по ссылке: oliwlife.ru/works/formstyler_bug/description.jpg
Вот чистая демонстрация бага без сторонних стилей и js: oliwlife.ru/works/formstyler_bug

Бывают и другие ситуации когда не выводит текст внутри бокса. Что очень печалит

Если Вы решаете использовать ли этот плагин сначала проверьте исправлен ли этот баг. Если нет то лучше обойти плагин стороной!

Я же описала его тут oliwlife.ru/works/formstyler_bug/description.jpg
Попробуйте откройте oliwlife.ru/works/formstyler_bug потом перейдите на любую другую ссылку, а потом используя кнопку назад (к примеру в хроме) перейдите обратно на страницу oliwlife.ru/works/formstyler_bug/. Это очень важно использовать кнопку «назад», так как именно при её использовании некоторые селекты пустые, какие именно у меня в описании рассказывается.

Селект Я последний оставила для более ясной демонстрации бага.

[Denis Buryi]

Анна Бакурова: Спасибо. Обязательно протестирую у себя на наличие подобного бага.

Answer 5

[Денис Инешин]

Вот плагин.