Стилизация выбранного элемента в Firefox

Question

Я пытаюсь оформить <select> в Firefox. В хроме я сделал это с:

-webkit-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;

Но в Firefox я не могу получить тот же результат с

-moz-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;

Есть идеи? Спасибо.

Answer 1

Поскольку Firefox 35, "-moz-appearance:none", который вы уже написали в своем коде, наконец, при желании удалите кнопку со стрелкой.

Это ошибка решенас этой версии.

Answer 2

Похоже, что это ошибка в Firefox: -moz-creation: нет с элементом select.См. Этот отчет об ошибке для получения дополнительной информации: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

Answer 3

Точный дубликат, как этот: https://stackoverflow.com/a/18317228/1411163

Тот же ответ:

Только что разобрался, как убрать стрелку выбора из Firefox. Хитрость заключается в использовании сочетания -prefix-Appearance, Text-Indent и Text-Overflow. Это чистый CSS и не требует дополнительной разметки.

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

Протестировано на Windows 8, Ubuntu и Mac, последних версиях Firefox.

Живой пример: http://jsfiddle.net/joaocunha/RUEbp/1/

Больше по теме: https://gist.github.com/joaocunha/6273016

Answer 4

Вы можете попробовать использовать другое значение для свойства -moz-appearance. Например, -moz-appearance: toolbox; отлично работает для меня.

Полный список значений можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

Answer 5

РЕДАКТИРОВАТЬ [2]: Поскольку @ joão-cunha удивительный трюк перестал работать в FF30, посмотрите этот новый обходной путь: http://jsfiddle.net/sstur/2EZ9f/ (на основе отображения @ keska: исправление гибкости и некоторыемагия теней)

РЕДАКТИРОВАТЬ: Это может быть сделано с использованием чистого CSS, как показано здесь: http://jsfiddle.net/sstur/fm5Jt/

Это будет стилизовать его в Chrome, Firefox, IE10 + и будет постепенно ухудшаться в старых IE идругие устаревшие браузеры.Он использует различные обходные пути для конкретного поставщика, включая -webkit-appearance: none, как вы упомянули.