Какое правильное значение -moz-Appearance скрывает стрелку выпадающего элемента <select> - PullRequest
Новая
       53

Какое правильное значение -moz-Appearance скрывает стрелку выпадающего элемента <select>

67 голосов
/ 22 июля 2011

Я пытаюсь стилизовать стрелку выпадающего элемента <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 Nightly на всех платформах.

Ответы [ 8 ]

99 голосов
/ 20 августа 2013

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

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

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

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

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

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

38 голосов
/ 22 июля 2011

Вот и все, ребята! FIXED!

Подождите и увидите: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

или обходной путь

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

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

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

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

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

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

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

4 голосов
/ 26 сентября 2012

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

-moz-appearance: window;
1 голос
/ 09 ноября 2012

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

0 голосов
/ 09 декабря 2014

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

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

или 

select {
    -moz-appearance: treeview;
}

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

0 голосов
/ 19 марта 2013

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

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

0 голосов
/ 12 февраля 2013

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

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

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

0 голосов
/ 19 декабря 2012

В 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.

...