Скрытие указателя по умолчанию в Firefox 22

После этого ответа qaru.site/info/37424/...

Я пробовал реализовать одно и то же решение, но оно не работает на моем Windows 7 Firefox 22, вот что я получаю:

enter image description here

select {
    -moz-appearance: window;
    -webkit-appearance: none;
    background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
    padding-right: 20px;
}
@-moz-document url-prefix() {
.wrapper {
     background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
     padding-right: 20px;
  }
}

EDIT: здесь jsfiddle http://jsfiddle.net/TGBEZ/1/

Ответы

Ответ 1

Обновление: этот трюк перестает работать с FF 30. Никаких других исправлений пока нет. Следите за полным текстом для обновлений.

Как удалить стрелку <select> в Firefox:

-moz-appearance:none; не работает сам по себе. Вам нужно добавить некоторые text-indent и text-overflow. Вот так:

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

Пример в реальном времени: http://jsfiddle.net/joaocunha/RUEbp/1/

Узнайте подробности этого вопроса: https://gist.github.com/joaocunha/6273016

Ответ 2

Это известная ошибка firefox, которая не будет исправлена ​​в ближайшее время или, возможно, даже позже (см. bugzilla).

Существует обходное решение CSS/HTML:

HTML:

<div class="styled">
    <select></select>
</div>

CSS:

div.styled {
    overflow: hidden;
    padding: 0;
    margin: 0;
}

div.styled select {
    width: 115%;
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    -webkit-appearance: none;
    border: none;
}

Сценарий

Проблема заключается в том, что вам нужно будет убедиться, что текст не будет слишком большим, иначе он перейдет через изображение.

Кроме того, есть javascript-решения. Взгляните на customselect, плагин jQuery, чтобы легко создавать свои собственные варианты.

Другой известный плагин: chosen

Ответ 4

Использование -moz-appearance: теперь вместо FF появляется окно вместо none

Ответ 5

У меня это работает в Firefox 30+ с:

-moz-appearance: текстовое поле;