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

Я пытаюсь стилизовать стрелку вниз элемента только с помощью 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-* stuff как -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; не работает для элемента . Также -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 на всех платформах.

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


Подождите и посмотрите: 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, вы, ребята, можете поблагодарить его сейчас!

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


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

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

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

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

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

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

 -moz-appearance: window; 

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

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

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

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

или

 select { -moz-appearance: treeview; } 

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

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

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

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

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

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

  • Сглаживание текста Wonky при повороте с помощью webkit-transform в Chrome
  • Свойство CSS3 webkit-overflow-scrolling: touch ERROR
  • Отключить кнопки запуска webkit на тип ввода = «номер»?
  • Сокращение перехода CSS с несколькими свойствами?
  • Как мой код iPhone Objective-C получит уведомление об ошибках Javascript в UIWebView?
  • Масштабирование изображения с помощью CSS: есть ли альтернатива webkit для -moz-crisp-edge?
  • Есть ли встроенный компонент Webkit для разработки Windows / C #?
  • Chrome / Safari не заполняет 100% высоту гибкого родителя
  • css3 переход анимации при загрузке?
  • Google Chrome - мышь не меняется
  • Поведение видеоввода HTML5 на iPhone и iPod в веб-приложениях Safari
  • Interesting Posts

    Обновить результаты функции Excel VBA

    Windows 8.1 – отключить сенсорный экран?

    C ++ 11 streamовая безопасность

    создание зачеркнутого текста?

    Как получить интерактивные гиперссылки в AlertDialog из строкового ресурса?

    Возможно ли подключить приложение к панели задач на дополнительном дисплее?

    Кажется, что сервлет обрабатывает несколько одновременных запросов браузера синхронно

    Почему в отдельных циклах стигментные добавления намного быстрее, чем в комбинированном цикле?

    Unity игровой менеджер. Скрипт работает только один раз

    Используя FireWire 800, имеет ли смысл использовать жесткий диск SSD, а не 7200 об / мин?

    Удаление цветовых кодов ANSI из текстового потока

    Простой TextView.setText вызывает 40% использования ЦП

    Как я могу остановить Filezilla, меняя мои строки?

    График в excel для представления корреляции трех параметров

    Заполнение jTable с использованием данных базы данных

    Давайте будем гением компьютера.