Bootstrap 3 Styled Select dropdown выглядит уродливым в Firefox на OS X

При стилизации элемента формы <select> в Bootstrap 3 он отображает уродливую кнопку в Firefox на OS X:

Это, по-видимому, давно известная проблема, и есть ряд хаков и обходных решений, ни одна из которых не очень чистая (https://github.com/twbs/bootstrap/issues/765). Мне интересно, нашел ли кто-нибудь хорошее решение этой проблемы, кроме использования выпадающих списков Bootstrap или дополнительных плагинов. Я преднамеренно решил использовать HTML <select> вместо выпадающего списка Bootstrap, потому что удобство использования лучше с длинными списками на мобильных устройствах.

Является ли это проблемой Firefox или проблемой Bootstrap?

Подробности: Mac OS X 10.9, Firefox 25.0.1

Обновление 12/4/13:. Я сделал бок о бок сравнение того, как каждый браузер отображает <select> в OS X 10.9 с помощью Firefox, Chrome и Safari в ответ на @zessx (используя http://bootply.com/98425). Очевидно, что существует большая разница между тем, как элемент формы <select> отображается в браузерах и ОС:

Я понимаю, что тег <select> обрабатывается по-разному в зависимости от того, какую ОС вы используете, поскольку существуют собственные элементы управления на основе ОС, которые диктуют стиль и поведение. Но что это за class="form-control" в Bootstrap, что заставляет элемент формы <select> выглядеть по-другому в Firefox? Почему по умолчанию, не в стиле <select> в Firefox выглядят хорошо, но как только он становится стильным, он выглядит уродливым?

Ответ 1

Фактически вы можете изменить серое окно вокруг стрелки вниз в IE:

        select::-ms-expand {
            width:12px;
            border:none;
            background:#fff;
        }

Ответ 2

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

select.custom {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20fill%3D%22%23555555%22%20%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%22-261%20145.2%2024%2024%22%20style%3D%22enable-background%3Anew%20-261%20145.2%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M-245.3%2C156.1l-3.6-6.5l-3.7%2C6.5%20M-252.7%2C159l3.7%2C6.5l3.6-6.5%22%2F%3E%0A%3C%2Fsvg%3E");
  padding-right: 25px;
  background-repeat: no-repeat;
  background-position: right center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

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

https://jsfiddle.net/x76j455z/10/

Ответ 3

Основываясь на отличных ответах rafx и Sina, вот фрагмент, который предназначен только для Firefox и заменяет кнопку по умолчанию с помощью пустых копий из темы иконок Bootstrap.

До:

После:

@-moz-document url-prefix() {
  select.form-control {
    padding-right: 25px;
    background-image: url("data:image/svg+xml,\
      <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
           height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\
        <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
      </svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 7px) 50%;
    -moz-appearance: none;
    appearance: none;
  }
}

(Встроенный SVG имеет обратную косую черту и символы новой строки для удобства чтения. Удалите их, если они создают проблемы в конвейере вашего ресурса.)

Вот JSFiddle

Ответ 4

Существует плавный jQuery-плагин, который, по-видимому, отлично работает с Bootstrap под названием SelectBoxIt (http://gregfranko.com/jquery.selectBoxIt.js/). То, что мне нравится в этом, заключается в том, что он позволяет запускать собственный блок выбора на любой ОС, на котором вы находитесь, сохраняя при этом постоянный стиль (http://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox). О, как бы я хотел, чтобы Bootstrap предоставил этот вариант!

Единственным недостатком этого является то, что он добавляет еще один уровень сложности в решение и дополняет работу для обеспечения совместимости со всеми другими плагинами, поскольку они обновляются или исправляются с течением времени. Я также не уверен в совместимости с Bootstrap 3. Но это может быть хорошим решением для обеспечения последовательного просмотра браузеров и ОС.

Ответ 5

Это обычное поведение и вызвано стилем по умолчанию <select> в Firefox: вы не можете установить line-height, тогда вам нужно играть на padding, если вы хотите иметь настроенный <select>.

Пример, с результатами в Firefox 25/Chrome 31/IE 10:

<select>
  <option>Default</option>
  <option>Default</option>
  <option>Default</option>
</select>

<select class="form-control">
  <option>Bootstrap</option>
  <option>Bootstrap</option>
  <option>Bootstrap</option>
</select>

<select class="form-control custom">
  <option>Custom</option>
  <option>Custom</option>
  <option>Custom</option>
</select>

select.custom {
  padding: 0px;
}

Bootply

Ответ 6

Я уверен, что -webkit-appearance:none делает трюк для Chrome и Safari.

EDIT: -moz-appearance: none должен теперь работать и в Firefox.

Ответ 7

Это легко. Вам просто нужно ввести внутри .form-control следующее:

.form-control{
        -webkit-appearance:none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
}

Это приведет к удалению внешнего вида браузера и разрешению вашего CSS.

Ответ 8

Я нашел два возможных способа решения этой конкретной проблемы:

Используйте Chosen
Настройте браузеры mozilla с помощью @-moz-document url-prefix() следующим образом:

@-moz-document url-prefix() {
  select {
    padding: 5px;
  }
}

Ответ 9

Мы использовали плагин bootstrap-select для Bootstrap для выбора dtyling. На самом деле хорошо работает и имеет множество интересных дополнительных функций. Я могу порекомендовать его точно.

Ответ 10

Я использую Chosen. Посмотрите: http://harvesthq.github.io/chosen/

Он работает на Firefox, Chrome, IE и Safari с тем же стилем. Но не на мобильных устройствах.

Ответ 11

Вы можете использовать jquery.chosen или bootstrap-select, чтобы добавить стиль к вашим кнопкам. Работайте отлично. Предостережение для использования выбранного или загрузочного-выбора: они оба скрывают исходный выбор и добавляют в свой собственный div свой собственный идентификатор. Если вы используете jquery.validate вместе с этим, например, он не найдет оригинальный выбор, чтобы выполнить его проверку, потому что он был переименован.