Как сделать кроссбраузерное оформление для Select?

Question

[Tlegen Bayangali]

Изначально работал в хроме. После чего решил проверить на работоспособность страницы в лисе. Но тут небольшое несоответствие.
Это то, как выглядит в лисе:

А так выглядит в хроме:

сам CSS, а точнее LESS кусок:

.lang_switcher {
                    background: transparent;
                    #lang_selector {
                        background: transparent;
                        border: none;
                        text-transform: uppercase;
                        font-size: 14px;
                        color: #fff;
                        option {
                            background-color: #ccc;
                        }
                    }
                }

Answer 1

[Вадим Белкин]

Пример
Скрываем дефолтную стрелку и делаем кастомную через фоновое изображение
Сами option кроссбраузерно стилизовать не получится, если только имитировать их обычной стилизованной версткой + js

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

Comments

[Moskus]

Имитировать. Эмитировать - это от слова "эмиссия", а не "имитация".

[Вадим Белкин]

Moskus, спасибо за исправление) в голове промелькнуло слово эмуляция и хотел было его написать, но исправил. а вот исправил не полностью))

[Tlegen Bayangali]

спасибо за пример!

Answer 2

[alexalexes]

select-ы, чекбоксы, полосы прокрутки - это самые некастомизируемые элементы веб интерфейса.
В качестве альтернативы используют JQuery ui виджеты.