HTML hide Выберите стрелку вниз с помощью css

Есть ли хороший способ скрыть стрелку вниз по умолчанию для всех браузеров? Я знаю, что вопрос задан пару раз, но НЕ похоже, что это решение будет работать для всех браузеров, и ни один из них не выглядит красивым. Уже прошло пару лет, и мне интересно, есть ли сейчас хорошее решение?

Ответ 1

Лучший способ, которым я мог это сделать, - это:

    select::-ms-expand
    {
        display: none;
    }
    select
    {
        -webkit-appearance: none;
        -moz-appearance: none;      
        appearance: none;
        padding: 2px 30px 2px 2px;
        /*border: none; - if you want the border removed*/
    }

Это работает в Chrome и IE.

К сожалению, в вашем случае -moz-appearance: none пока не поддерживается полностью.

Здесь есть ошибка: https://bugzilla.mozilla.org/show_bug.cgi?id=649849, которая имеет RESOLVED FIXED статус, но, похоже, зависит от другой ошибки здесь: https://bugzilla.mozilla.org/show_bug.cgi?id=1076846, у которого есть НОВЫЙ статус, поэтому, надеюсь, он скоро будет исправлен.

Ответ 2

https://gist.github.com/joaocunha/6273016/

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    text-indent: 0.1;
    text-overflow: '';
}

Ответ 3

Для webkit browswers, -webkit-appearance: none удалит ВСЕ стиль браузера select по умолчанию. Имейте в виду, что это надежный, но он удалит ВСЕ стиль, а не только стрелку. На данный момент нет другого надежного решения.