Хорошо, я знаю, что этот вопрос старый, но 2 года спустя и Mozilla ничего не сделали.
Я придумала простой обходной путь.
Это, по существу, удаляет все форматирование поля выбора в Firefox и оборачивает элемент span вокруг поля выбора с вашим собственным стилем, но должно применяться только к Firefox.
Скажем, это ваше меню выбора:
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
И давайте предположим, что класс css 'css-select':
.css-select {
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
В Firefox это будет отображатьсяс меню выбора, за которым следует уродливая стрелка выбора Firefox, за которой следует ваш красивый вид.Не идеально.
Теперь, чтобы запустить это в Firefox, добавьте элемент span с классом 'css-select-moz':
<span class='css-select-moz'>
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
</span>
Затем исправьте CSS, чтобы скрыть грязную стрелку Mozilla с помощью -moz-Appearance: окно и бросить пользовательскую стрелку в класс span 'css-select-moz', но заставить его отображаться только на mozilla, например так:
.css-select {
-moz-appearance:window;
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
@-moz-document url-prefix() {
.css-select-moz{
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
}
Довольно круто, только чтобы наткнуться на этоошибка 3 часа назад (я новичок в веб-дизайне и полностью самоучка).Однако, это сообщество косвенно оказало мне такую большую помощь, я думал, что пришло время вернуть что-то.
Я тестировал его только в Firefox (Mac) версии 18, а затем 22 (после того, как я обновил).
Все отзывы приветствуются.