Кроссбраузерная стилизация select + option

@sanchahous · Регистрация: 24.12.2013

Студворк — интернет-сервис помощи студентам

Объясните как задать стили (кроссбраузерно, начиная с IE8) для вот такой вот формы

HTML5
1
2
3
4
5
6
select id="category">
             <option class="selected" selected="selected">Категория</option>
             <option>Битва 1</option>
             <option>Битва 2</option>
             <option>Битва 3</option>
</select>

Нужно задать стиль для:
select, option(всех), option(selected). Стиль для селекта, для всех опций и отдельно для выбранной опции.
Чистым CSS я так понял не сделаешь, какие есть варианты?

@Qwertiy · 21.07.2014, 23:33

Сообщение от sanchahous

Чистым CSS я так понял не сделаешь

Если о кроссбраузерности не особор заботиться, то можно попробовать. В IE11 и Хроме должно быть можно что-то сделать, вероятно в FF - тоже, но про неё не знаю. С IE10- не выйдет.

Сообщение от sanchahous

какие есть варианты?

Заменять на список, его показывать и обрабатывать джаваскриптом.
Можно использовать готовый jQuery UI Select2.

@sanchahous · 21.07.2014, 23:52 **[ТС]**

Сообщение от Qwertiy

Можно использовать готовый jQuery UI Select2.

Прикол в том, что ради 1 селекта, пришлось подключать столько лишнего, что плохо стало. вот ищу варианты.

@Qwertiy · 22.07.2014, 00:55

Ну так можно и самому написать.
А всё-таки, какая именно стилизация требуется?

@sanchahous · 22.07.2014, 01:28 **[ТС]**

Сообщение от Qwertiy

А всё-таки, какая именно стилизация требуется?

Щас нету. завтра скину.

@sanchahous · 22.07.2014, 10:22 **[ТС]**

Вот такое надо вообщем сделать. Для option там просто шрифт получается ну и фон возможно. Но всеравно тоже нужно стиль задать и для option.

@Qwertiy · 22.07.2014, 11:23

Вроде бы это можно просто css'ом сделать, не?
Только красить надо сам select.

@sanchahous · 22.07.2014, 11:28 **[ТС]**

Сообщение от Qwertiy

Вроде бы это можно просто css'ом сделать, не?

А кнопка кастомная справа? плюс option тоже надо задать стили шрифта.
Пришел к тому, что самым удобным для меня оказался вот этот плагин http://ivaynberg.github.io/select2/
2 файла подключил, переделал под себя CSS, буквально 15 минут и можно задавать стили и option и чему угодно. Я сам ничего не пишу, думаю потому - что все уже давно сделанное есть, да и писать я не умею, не мое...

@Qwertiy · 22.07.2014, 12:03

Сообщение от sanchahous

А кнопка кастомная справа?

Хм.. А что в ней кастомного? А то смотрю - вроде бы стандартная стрелка. По крайней мере, так обычно стандартные выглядят, при чисто css'ной стилизации select'а.

@vovandr · 22.07.2014, 12:08

Qwertiy на css select не стилизуется и стрелки эти выглядят опрятно на mac, под виндой же в некоторых браузерах они страшные

@sanchahous · 22.07.2014, 12:34 **[ТС]**

Вообще если стрелка не стандартная, если она нарисованная дизайнером, да еще и имеет фон, предпочитаю делать все вместе фоновой картинкой. Сами понимаете, это как минимум совпадение во всех браузерах. Картинка она и в IE картинка)))

@Qwertiy · 22.07.2014, 13:11

Сообщение от vovandr

на css select не стилизуется

На стилизацию границ, отступов и цвета фона вполне можно рассчитывать во всех нормальных браузерах.
В IE11 доступна стилизация полностью - там специальные псевдоэлементы.
В webkit'ах вид сбрасывается через -webkit-appearence, после чего можно стилизовать как угодно.
В FF есть -moz-appearence, но он не убирает стрелку.
Вообще, для скрытия стрелки select кладут в inline-block span с overflow:hidden и выставляют ширину больше заданной. После этого можно присобачить кастомную стрелку.

Сообщение от vovandr

под виндой же в некоторых браузерах они страшные

В каких именно? Вроде бы везде примерно одинаковые.

@vovandr · 22.07.2014, 13:16

Сообщение от Qwertiy

В каких именно? Вроде бы везде примерно одинаковые.

Не могу вам сейчас это сказать, но они никакие не одинаковые это точно.
по поводу стилизации что вы предлагаете, все это не кроссбраузерно и не имеет смысла, так как со скриптом это делается быстрее и проще

@sanchahous · 22.07.2014, 13:30 **[ТС]**

Сообщение от vovandr

так как со скриптом это делается быстрее и проще

100% подтверждаю но: реально перерыл много скриптов, много и фигни всякой в инете. Select 2 как по мне показал себя лучше.

@vovandr · 22.07.2014, 13:34

Кстати, что касается стилизации на css про которую писал Qwertiy то там проблема будет не только в IE 10 и ниже, но и в Opera. Я думаю в недалеком будущем конечно все это будeт стилизовать с помощью appearence.

Сообщение от sanchahous

100% подтверждаю но: реально перерыл много скриптов, много и фигни всякой в инете. Select 2 как по мне показал себя лучше.

Да, я помню тоже с этим столкнулся, правда использовал какой-то другой скрипт) Но этот уже форкнул себе

@sanchahous · 22.07.2014, 13:44 **[ТС]**

А вот и страничка с selectom в работе. Option еще особо не трогал, а все остальное одинаково во всех браузерах начиная с IE8. Но что-то слишком много времени потрачено на это...
http://sun8.hol.es/takyda/filter.html

@vovandr · 22.07.2014, 13:46

sanchahous норм, только text-shadow кажется лишним

@sanchahous · 22.07.2014, 14:05 **[ТС]**

Сообщение от vovandr

только text-shadow кажется лишним

Может быть, я всегда CSS из фотошопа копирую особо не заморачиваясь)

Новые блоги и статьи Все статьи Все блоги /
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

@Qwertiy 835 / 643 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	22.07.2014, 00:55
	Ну так можно и самому написать. А всё-таки, какая именно стилизация требуется? 0

@sanchahous 19 / 19 / 7 Регистрация: 24.12.2013 Сообщений: 205
	22.07.2014, 10:22 [ТС]
	Вот такое надо вообщем сделать. Для option там просто шрифт получается ну и фон возможно. Но всеравно тоже нужно стиль задать и для option. Миниатюры 0

@Qwertiy 835 / 643 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	22.07.2014, 11:23
	Вроде бы это можно просто css'ом сделать, не? Только красить надо сам select. 1

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	22.07.2014, 12:08
	Qwertiy на css select не стилизуется и стрелки эти выглядят опрятно на mac, под виндой же в некоторых браузерах они страшные 0

@sanchahous 19 / 19 / 7 Регистрация: 24.12.2013 Сообщений: 205
	22.07.2014, 12:34 [ТС]
	Вообще если стрелка не стандартная, если она нарисованная дизайнером, да еще и имеет фон, предпочитаю делать все вместе фоновой картинкой. Сами понимаете, это как минимум совпадение во всех браузерах. Картинка она и в IE картинка))) 0

@sanchahous 19 / 19 / 7 Регистрация: 24.12.2013 Сообщений: 205
	22.07.2014, 13:44 [ТС]
	А вот и страничка с selectom в работе. Option еще особо не трогал, а все остальное одинаково во всех браузерах начиная с IE8. Но что-то слишком много времени потрачено на это... http://sun8.hol.es/takyda/filter.html 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	22.07.2014, 13:46
	sanchahous норм, только text-shadow кажется лишним 0