Ответ 1

Update

По состоянию на январь 2015 года это теперь снова работает с выпуском Firefox 35. См. ответ ниже для справки по истории.

Фон

Используемый хак:

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

В моем тестировании, на FF 29, -moz-appearance:none; не повлияло. Что не вызвало появление стрелочной коробки, это вторая строка. Он сказал, что любое переполнение должно быть заменено пустой строкой, а затем используется текстовый отступ, чтобы вызвать переполнение select. Поскольку стрелочный ящик отображается как один элемент, похожий на одну букву, это заставляло его заменяться пустой строкой.

Что произошло

Кто-то из Mozilla заметил, что если у вас есть отступы в выпадающем меню select, стрелка не изменяет размер. В соответствии с сообщением об ошибке эта проблема исправлена:

Проблема в том, что это развело стрелку из обычных правил CSS. Я пробовал padding, text-indent, margin, white-space, text-wrap и еще несколько, и я не могу найти ничего, что повлияет на него. В другом месте интернет, люди говорят то же самое, к сожалению.

Что сейчас

• У нас есть несколько вариантов. Вы можете использовать наложение в сочетании с pointer-events:none, чтобы создать выпадающее меню, но вы хотите: Учебное пособие

• Вы можете создать полностью отдельный выпадающий список, чтобы заменить select, используя Javascript: Учебное пособие

Мы также можем посмотреть запрос на Firefox Bugzilla и надеемся, что когда-нибудь они создадут не- хакерский способ сделать это. ОБРАТИТЕ ВНИМАНИЕ. Не ходите туда и начинайте отправлять комментарии о желании. Часть причин, по которым это было так отложено, - это то, что люди бросали посадку. Это может помочь голосовать за проблему.

Обновление от 2014 года

Теперь это активно работало над для Firefox. 2 патча были представлены и ожидали рассмотрения в течение недели. Скорее всего, сценарий заключается в том, что это превращает его в FF35 Aurora, и у нас есть несколько недель, чтобы он был рассмотрен и одобрен до даты отсечения (Firefox работает в расписании на 6 недель). Это также может быть отложено, и это даже теоретически может быть "поднято", что означает исправление в текущих версиях Aurora и Beta, чтобы скорее высвободиться.

Обновление от 2014 года

Это как официально разрешено! Вид. Патч, позволяющий пользователям скрывать элемент со стрелкой вниз, был зафиксирован и будет отправлен с Firefox 35 в январе 2015.

Это позволит пользователям скрывать стрелку. Для стиля это еще одна проблема, которая была выделена в еще один билет с ошибкой, который будет рассмотрен в будущем.

Обновление января 2015 г.

Это исправлено! Firefox 35 вышел 13 января, и теперь вы можете использовать -moz-appearance:none для удаления стрелки.

Ответ 2

Да! Хороший! Thks

JS FIDDLE

.customSelect {
    font-size: inherit;
    margin: 0;
    padding: 0.5em;
    background-color: transparent;
    color: #393939;
    opacity:1;
    -moz-appearance: none;
    border: 0 none;
    border-radius: 0px;
    border:1px solid #B1B2B3;
    padding-right: 2.5em;
}

Ответ 3

.SelectBox select {
   background: transparent;
   width: 182px;
   padding-right: 29px;
   font-size: 100%;
   text-indent: 0.01px;
   text-overflow: "";
   border: none;
   height: 17.5px;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.SelectBox {
   width: 154px;
   height: 15.8px;
   overflow: hidden;
   background: url("Images/Arrow.png") no-repeat 141px center #ffffff;
   border-radius:2px;
   border: 1px solid #B90F22;
}

<div class="SelectBox">
   <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
   </select>
</div>

Кажется, что это нормально в каждом крупном браузере, но IE. IE возвращается к выпадающему меню по умолчанию, поэтому это не должно быть проблемой.

Ответ 4

Ответ, предоставленный Mozilla Firefox на эту проблему, просто неприемлем. Браузер разбит и представляет собой не что иное, как открытую боль для вредоносного кода. Они продвигают браузер V29-30 в качестве обновления для системы безопасности, но потребовалось более недели с момента выпуска уведомления для V30.

Мой собственный ответ - ничего не делать, и я призываю всех остальных разработчиков сделать то же самое. В конечном итоге пользователи устанут от несоответствий дизайна и оставят Mozilla Firefox, как будто они были в еще большем количестве.

Если разумный запрос поддержки встречается с явным презрением, и другие браузеры могут это сделать, но Mozilla Firefox больше не может. Это не я, который должен исправить мой код, но Mozilla Firefox должен их исправить!

Ответ 5

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

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

Ответ 6

Хотя это довольно грязный взломать, вы можете исправить это, добавив еще один элемент наложения над стрелкой вниз в CSS вашей обертки выбора (в моем случае .form-control-select):

/* The arrow */
.form-control-select:after {
    content: "\f078";
    z-index: 3;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 9px;
    padding: 6px 7px;
    font-size: 10px;
}

/* the white overlay to hide Firefox' arrow */    
.form-control-select:before {
    position: absolute;
    right: 1px;
    top: 2px;
    bottom: 1px;
    width: 20px;
    background: #fff;
    content: "";
    z-index: 2;
    border: 1px solid transparent;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 1px;
    pointer-events: none; 
}

Мой HTML:

<div class="form-control-select">
  <select class="form-control">
    <option value="1">one</option>
    <option value="2">two</option>
  </select>
</div>

Ответ 7

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

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

Вот сценарий js для него. JSFIDDLE тестируется во всех браузерах.

выберите:: - ms-expand для IE и -webkit-user-select: none для chrome.

 <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>
</div>
.common-dropdown-small-div{
  border: 1px solid rgb(208, 208, 208);
  border-radius: 5px !important;
  overflow: hidden; 
}

.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;
}

Ответ 8

Один из вариантов состоит в том, чтобы обернуть элементы select в элементы контейнера с помощью overflow: hidden. Увеличьте ширину элементов select, чтобы нажимать стрелку вниз вправо и влево. Затем добавьте границу к элементам контейнера, которые соответствуют элементам select.

.select-container {
    overflow: hidden;
    display: inline-block;
    height: 33px;
    border-right: 1px solid #B3B6BD;
}

.select-container select {
    width: 113%;
}

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