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

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

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

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

HTML5

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 из фотошопа копирую особо не заморачиваясь)

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

@sanchahous 19 / 19 / 7 Регистрация: 24.12.2013 Сообщений: 205
	22.07.2014, 14:05 [ТС]	18
	Сообщение от vovandr только text-shadow кажется лишним Может быть, я всегда CSS из фотошопа копирую особо не заморачиваясь) 0

@Qwertiy 833 / 641 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	21.07.2014, 23:33	2
	Сообщение от sanchahous Чистым CSS я так понял не сделаешь Если о кроссбраузерности не особор заботиться, то можно попробовать. В IE11 и Хроме должно быть можно что-то сделать, вероятно в FF - тоже, но про неё не знаю. С IE10- не выйдет. Сообщение от sanchahous какие есть варианты? Заменять на список, его показывать и обрабатывать джаваскриптом. Можно использовать готовый jQuery UI Select2. 0

@sanchahous 19 / 19 / 7 Регистрация: 24.12.2013 Сообщений: 205
	21.07.2014, 23:52 [ТС]	3
	Сообщение от Qwertiy Можно использовать готовый jQuery UI Select2. Прикол в том, что ради 1 селекта, пришлось подключать столько лишнего, что плохо стало. вот ищу варианты. 0

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

@sanchahous 19 / 19 / 7 Регистрация: 24.12.2013 Сообщений: 205
	22.07.2014, 01:28 [ТС]	5
	Сообщение от Qwertiy А всё-таки, какая именно стилизация требуется? Щас нету. завтра скину. 0

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

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

@sanchahous 19 / 19 / 7 Регистрация: 24.12.2013 Сообщений: 205
	22.07.2014, 11:28 [ТС]	8
	Сообщение от Qwertiy Вроде бы это можно просто css'ом сделать, не? А кнопка кастомная справа? плюс option тоже надо задать стили шрифта. Пришел к тому, что самым удобным для меня оказался вот этот плагин http://ivaynberg.github.io/select2/ 2 файла подключил, переделал под себя CSS, буквально 15 минут и можно задавать стили и option и чему угодно. Я сам ничего не пишу, думаю потому - что все уже давно сделанное есть, да и писать я не умею, не мое... 0

@Qwertiy 833 / 641 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	22.07.2014, 12:03	9
	Сообщение от sanchahous А кнопка кастомная справа? Хм.. А что в ней кастомного? А то смотрю - вроде бы стандартная стрелка. По крайней мере, так обычно стандартные выглядят, при чисто css'ной стилизации select'а. 0

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

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

@Qwertiy 833 / 641 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	22.07.2014, 13:11	12
	Сообщение от vovandr на css select не стилизуется На стилизацию границ, отступов и цвета фона вполне можно рассчитывать во всех нормальных браузерах. В IE11 доступна стилизация полностью - там специальные псевдоэлементы. В webkit'ах вид сбрасывается через -webkit-appearence, после чего можно стилизовать как угодно. В FF есть -moz-appearence, но он не убирает стрелку. Вообще, для скрытия стрелки select кладут в inline-block span с overflow:hidden и выставляют ширину больше заданной. После этого можно присобачить кастомную стрелку. Сообщение от vovandr под виндой же в некоторых браузерах они страшные В каких именно? Вроде бы везде примерно одинаковые. 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	22.07.2014, 13:16	13
	Сообщение от Qwertiy В каких именно? Вроде бы везде примерно одинаковые. Не могу вам сейчас это сказать, но они никакие не одинаковые это точно. по поводу стилизации что вы предлагаете, все это не кроссбраузерно и не имеет смысла, так как со скриптом это делается быстрее и проще 0

@sanchahous 19 / 19 / 7 Регистрация: 24.12.2013 Сообщений: 205
	22.07.2014, 13:30 [ТС]	14
	Сообщение от vovandr так как со скриптом это делается быстрее и проще 100% подтверждаю но: реально перерыл много скриптов, много и фигни всякой в инете. Select 2 как по мне показал себя лучше. 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	22.07.2014, 13:34	15
	Кстати, что касается стилизации на css про которую писал Qwertiy то там проблема будет не только в IE 10 и ниже, но и в Opera. Я думаю в недалеком будущем конечно все это будeт стилизовать с помощью appearence. Сообщение от sanchahous 100% подтверждаю но: реально перерыл много скриптов, много и фигни всякой в инете. Select 2 как по мне показал себя лучше. Да, я помню тоже с этим столкнулся, правда использовал какой-то другой скрипт) Но этот уже форкнул себе 0

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