Что такое правильное значение "-moz-appearance", чтобы скрыть стрелку вниз элемента <select>

Я пытаюсь стилизовать стрелку вниз элемента <select> только с помощью CSS, он отлично работает в Chrome/Safari:

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;

  background-image: url('./select-arrow1.png') ;
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  margin: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 200px;
}

Что красиво выглядит как показано здесь

По этой логике единственное, что я должен был сделать, чтобы заставить ее работать в Firefox, это добавить все -webkit-* в качестве -moz-*:

-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;

Он работает на 99%, единственная проблема заключается в том, что стрелка вниз по умолчанию не исчезает и остается поверх фонового изображения как видно здесь

Похоже, что -moz-appearance: button; не работает для элемента <select>. Также -moz-appearance: none; не влияет на удаление стрелки вниз по умолчанию.

Итак, каково правильное значение для -moz-appearance, чтобы удалить стрелку вниз по умолчанию?

Обновление:

11 декабря 2014 года: Прекратите изобретать новые хаки. Через 4 с половиной года -moz-appearance:none начинает работать с Firefox 35. Хотя moz-appearance:button все еще сломан, вам все равно не нужно его использовать. Вот очень простой рабочий пример.

28 апреля 2014 года: упомянутый css hack работал в течение нескольких месяцев, но с самого начала апреля 2014 года эта ошибка ползает назад в Firefox 31.0.a1 Ночью на всех платформах.

Ответы

Ответ 1

Это ребята! ИСПРАВЛЕНО!

Подождите и посмотрите: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

или

Для тех, кто задается вопросом:

https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59

Во-первых, поскольку в этой ошибке есть много враждебного спама, она создает враждебное рабочее место для всех, кто получает это назначение.

Во-вторых, лицо, у которого есть возможность сделать это (включая переписывание), на время было выделено другому проекту (b2g) и не будет иметь времени, пока этот проект не приблизится к завершению.

В-третьих, даже когда у этого человека снова есть время, нет гарантии, что это будет приоритетом, потому что, несмотря на то, что webkit имеет это, он ломает спецификацию о том, как должен работать (вот что мне сказали, я лично не знаю спецификации)

Теперь см. https://wiki.mozilla.org/B2G/Schedule_Roadmap;)

Страница больше не существует, и ошибка не исправлена, но приемлемый обходной путь пришел от João Cunha, вы, ребята, можете поблагодарить его сейчас!

Ответ 2

Обновление: это было исправлено в Firefox v35. Подробнее см. полный текст.

== как скрыть стрелку выбора в Firefox ==

Просто понял, как это сделать. Хитрость заключается в использовании комбинации -prefix-appearance, text-indent и text-overflow. Это чистый CSS и не требует дополнительной разметки.

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

Короче говоря, слегка потянув его вправо, переполнение избавляется от стрелки. Довольно аккуратно, да?

Подробнее о этот смысл Я только что написал. Протестировано на Ubuntu, Mac и Windows, все с последними версиями Firefox.

Ответ 3

Чтобы избавиться от стрелки вниз по умолчанию, используйте:

-moz-appearance: window;

Ответ 4

Попробуйте поставить непрозрачность: 0; ваш элемент select будет невидим, но параметры будут видны, когда вы нажмете на него.

Ответ 6

Стоит попробовать эти 2 варианта ниже, пока мы все еще ждем исправления в FF35:

select {
    -moz-appearance: scrollbartrack-vertical;
}

или

select {
    -moz-appearance: treeview;
}

Они просто скроют любое фоновое изображение стрелки, которое вы ввели в пользовательский стиль вашего элемента select. Таким образом, вы получаете ботовую стандартную стрелку браузера вместо жуткой комбинации как стрелки браузера, так и вашей собственной стрелки.

Ответ 7

Пока вы еще не можете заставить Firefox удалить раскрывающуюся стрелку (см. сообщение MatTheCat), вы можете скрыть свое "стилизованное" фоновое изображение от показа в Firefox.

-moz-background-position: -9999px -9999px!important;

Это поместит его в рамку, оставив при этом стрелку окна выбора по умолчанию - сохраняя стилизованную версию в Webkit.

Ответ 8

он работает при добавлении:

выберите {width: 115%}