Я пытаюсь создать стиль <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;
Любые идеи? Спасибо.
Так как Firefox 35, "-moz-appearance:none", который вы уже написали в своем коде, в конце концов удалите кнопку со стрелкой.
Это была ошибка, разрешенная с этой версии.
Похоже, что это ошибка в Firefox: -moz-appearance: none с элементом select. Дополнительную информацию см. В этом отчете об ошибке: https://bugzilla.mozilla.org/show_bug.cgi?id=649849
Точный дубликат: 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
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, как вы упомянули.
Вы можете использовать другое значение для свойства -moz-appearance. Например,
-moz-appearance: toolbox; отлично работает для меня.
Полный список значений можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance