Стилизация элемента select в Firefox

Ответ 1

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

Это была ошибка, разрешенная с этой версии.

Ответ 2

Похоже, что это ошибка в Firefox: -moz-appearance: none с элементом select. Дополнительную информацию см. В этом отчете об ошибке: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

Ответ 3

Точный дубликат: fooobar.com/questions/37424/...

Тот же ответ:

Просто понял, как удалить стрелку выбора из 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

Ответ 4

EDIT [2]: Поскольку @joão-cunha удивительный трюк, перестали работать в FF30, см. это новое обходное решение: http://jsfiddle.net/sstur/2EZ9f/ (на основе отображения @keska: исправление Flex и некоторая магия текста-тени)

EDIT: это можно сделать с использованием чистого CSS, как показано здесь: http://jsfiddle.net/sstur/fm5Jt/

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

Ответ 5

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

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