Каково правильное значение "- moz-appearance", чтобы скрыть стрелку раскрывающегося списка элемента

Я пытаюсь создать выпадающую стрелку <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 апреля в указанном CSS-Хак работал в течение нескольких месяцев, но с начала апреля 2014 Эта ошибка ползет обратно в Firefox 31.0.А1 еженощно на всех платформах.

67
css firefox gecko webkit

8 ответов

Это он, ребята! исправлено!

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

или решение

для тех, кому интересно:

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

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

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

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

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

страница больше не существует, и ошибка не была исправлена, но приемлемое решение проблемы пришел от Жуана Кунья, вы, ребята, можете поблагодарить его за Сейчас!

38

обновление: это было исправлено в Firefox v35. Вижу вся суть для сведения.

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

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

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

короче говоря, нажав его немного вправо, переполнение избавляется от стрелки. - Здорово, да?

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

98

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

-moz-appearance: window;
4

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

1

в Mac OS -moz-appearance: window; удалит стрелку, соответствующую документам MDN здесь:https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance. Протестировано на Firefox 13 на Mac OS X 10.8.2. См. также: https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c21.

0

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

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

или

select {
    -moz-appearance: treeview;
}

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

0

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

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

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

-2

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

выберите { ширина:115% }

-3