Как скрыть стрелку <select> в Firefox 30+?

Этот хак, используемый для работы в <= Firefox 29 для удаления стрелки <select>:

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

Он больше не работает в Firefox 30. Arrow возвращается.

Codepen для взлома, который работает в Firefox 29
Связанная ошибка (теперь исправлена в Fx 35b)

Кто-нибудь знает способ достижения такого же эффекта?

Примечание1: меня не интересуют решения, которые накладывают стрелку на другой элемент или решения, которые вставляют элемент select и выполняют переполнение: hidden.

Примечание2: Я пробовал все возможности -moz-appearance. Они либо добавляют стиль по умолчанию, который я не могу переопределить, не позволяйте настраивать стиль (например, границы и фон), или стрелка все еще видна.

Обновить: он работает снова в Firefox 35 (в настоящее время в бета-версии) с помощью -moz-appearance: none, что делает этот взгляд согласованным во всех последних браузерах (протестировано в IE11, Firefox 35b, Chrome 39, Safari 8): http://jsfiddle.net/phd5pu9x/

Ответ 1

Я исправил эту проблему, предоставив некоторый стиль div и выбрав индивидуально.

Любой может изменить свою ширину и другие свойства стиля a/c.:)

Вот сценарий js для него. JSFIDDLE

<div  class="common-dropdown-small-div" style="width: 220px">
<select id="select" class="common-dropdown-project-select">
    <option>
        apple
    </option>
    <option>
        blackberry
    </option>
    <option>
       pumpkin
    </option>
</select>

.common-dropdown-small-div{
border: 1px solid rgb(208, 208, 208);
overflow: hidden; 
width: 220px;  }

.common-dropdown-project-select{
  width: 100% !important;
background-image: url("http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png");
background-position: 97% 60%, 0 0 ! important;    
 background-repeat: no-repeat;
background-size: 25px 16px;
border: none  ! important;    
outline : medium none !important;
display: inline-flex !important;
height: 33px !important;
vertical-align: top;
-webkit-appearance: none; }

select::-ms-expand {
display: none;}

Ответ 2

Поместите выбор в другой контейнер с переполнением: hiden;, сделайте выбор более широким, чем контейнер. Если вы хотите, чтобы граница добавила его в контейнер.

Примером является селектор внизу этой страницы: https://mozillians.org/en-US/

Ответ 3

Вы можете использовать это решение для firefox, используя псевдо-класс поставщика: -moz-any() и события указателя только для mozilla и не влияют на другие браузеры, потому что оба действуют с версии 3.6.

Вот пример jsbin http://jsbin.com/pozomu/4/edit

Ответ 4

/* Для mozilla Firefox 30.0+ я использовал следующее, чтобы скрыть вновь появляющуюся стрелку: */

@- moz-document url-prefix() {

.yourClass:after {
    position: absolute;
    margin-left: -25px;
    border-radius: 4px;
    content: url('../images/pathToYourDownArrowImage.svg');
    pointer-events: none;
    overflow: hidden;
}

/* Я все еще использую это, чтобы переместить текст поверх */

.yourClass select {
    text-overflow: '';
    text-indent: -1px;
    -moz-appearance: none;
    background: none;
}

}

Ответ 5

Firefox > 29 -moz-appearance: none; но у меня проблема с шириной, мы расширяем ширину выделения от 100 до 110%, чтобы скрыть, но она влияет на дизайн форм, поэтому я просто спрячу его с div и выше,

Проверьте версию кодекса

http://codepen.io/ssbalakumar/pen/jgLEq

Ответ 6

Как @mircea c ссылается на...

Если ваш HTML выглядит так:

<div class="styled-select">
   <select>
     <option>Here is the first option</option>
     <option>The second option</option>
     <option>The thrid option</option>
   </select>
</div>

Затем вы можете удалить стрелку раскрывающегося списка в Firefox 30 +

.styled-select { 
  overflow: hidden; 
  width: 200px;
}

@-moz-document url-prefix(){
  .styled-select select { width: 110%; }
}

Рабочая демонстрация: codepen

FYI: Тот же метод работает в IE 8 и 9, просто используйте условный комментарий вместо @-moz-document url-prefix()