TlegenBayangali
@TlegenBayangali
Учусь Front-end разработке

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

Изначально работал в хроме. После чего решил проверить на работоспособность страницы в лисе. Но тут небольшое несоответствие.
Это то, как выглядит в лисе:
5ad78edf0f930226531651.jpeg
А так выглядит в хроме:
5ad78f0b79bf1478746555.jpeg
сам CSS, а точнее LESS кусок:
.lang_switcher {
                    background: transparent;
                    #lang_selector {
                        background: transparent;
                        border: none;
                        text-transform: uppercase;
                        font-size: 14px;
                        color: #fff;
                        option {
                            background-color: #ccc;
                        }
                    }
                }
  • Вопрос задан
  • 188 просмотров
Решения вопроса 1
@BelkinVadim
Frontend разработчик
Пример
Скрываем дефолтную стрелку и делаем кастомную через фоновое изображение
Сами option кроссбраузерно стилизовать не получится, если только имитировать их обычной стилизованной версткой + js

Но стоит учитывать что селект может быть с мультивыбором, для него данную стилизацию лучше не применять.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@alexalexes
select-ы, чекбоксы, полосы прокрутки - это самые некастомизируемые элементы веб интерфейса.
В качестве альтернативы используют JQuery ui виджеты.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы