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

Я пытаюсь создать выпадающую стрелку a <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 hack работал в течение нескольких месяцев, но с начала апреля 2014 года эта ошибка ползет обратно в Firefox 31.0.a1 ночь на всех платформах.

8 67
css webkit firefox gecko

8 ответов:

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

подождите и посмотрите: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 ;)

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

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; ваш выбранный элемент будет невидимым, но параметры будут видны, когда вы нажмете на него.

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