Twitter Bootstrap Выберите Стрелка отсутствует

У меня проблема с кнопкой выбора выпадающего списка в twitter bootstrap. Это происходит в двух браузерах, которые я установил на компьютере (IE11, Chrome), и он не ограничивается только "моими сайтами".

Вот скриншот загрузочного сайта (ОС: Windows 8.1 Broswer: Chrome) (http://getbootstrap.com/css/#forms-controls):

Я проверил окно консоли, и все ресурсы загружаются правильно.

Может ли кто-нибудь помочь мне в том, почему это происходит/шаги для решения?

Ответ 1

TL; DR: вы не можете использовать CSS для изменения значка. Вам нужно будет использовать библиотеку, которая реализует элемент управления, подобный выбору, с использованием HTML и JavaScript (за счет мобильных решений для мобильных устройств на iOS и Android).

Значок, отображаемый в <select>, определяется браузером пользователя или операционной системой. Вы не можете изменить его с помощью CSS.

Выберите отображение в Chrome на Mac:

Выберите отображение в Chrome на Mac с удалением некоторых стилей:

Я удалил линейную высоту, фоновый цвет, границу, радиус границы и тень окна. Обратите внимание, что стрелка изменилась, хотя я не изменил никакого связанного стиля.

Выберите отображение в Chrome в Windows:

Обратите внимание, что значки разные, хотя код тот же.

Теперь что?

Несмотря на то, что select isn'g очень стильно, существует множество библиотек, которые обеспечивают очень настраиваемую реализацию элемента управления, подобного выбору. Мне нравится использовать Bootstrap-select.

Эта библиотека создает <div class="caret"></div>, который может быть изменен для изменения значка. Например, после включения JavaScript-бутстрапа, выберите следующий код:

HTML

<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

CSS

.caret{
    color: red;
}

Дает мне этот дисплей:

Вы потеряете мобильный дисплей, хотя:

Использование пользовательской библиотеки отключит удобный для мобильных устройств способ выбора iOS и Android, поэтому убедитесь, что пользовательский значок достаточно важен для вас, прежде чем продолжить.

Ответ 2

Используйте для выбора

select {
-moz-appearance: none;
background: rgba(0, 0, 0, 0) url("../images/dropdown.png") no-repeat scroll 100% center / 20px 13px !important;
border: 1px solid #ccc;
overflow: hidden;
padding: 6px 20px 6px 6px !important;
width: auto;
}

Ответ 3

В настоящий момент вы не можете стилизовать элемент <select>. Каждый браузер применяет собственный стиль для большинства элементов формы.

Итак, вы можете создать свой собственный выбор, скрыв исходный, создать разметку, например. div с ul + li и прожить его с помощью javascript.

ИЛИ

Если вы не против использования jQuery, попробуйте эти библиотеки:

Ответ 4

Я испытал это поведение с IE в Windows 8.1. По какой-то причине IE визуализирует стрелку по-разному, как только вы начинаете стилизовать элемент select (какие обычно загружаются темы начальной загрузки). Даже такое простое, как установка цвета фона вызывает это поведение.

Единственное решение, которое я нашел до сих пор, - это стиль стрелки по мере необходимости. Вы можете использовать псевдо-элемент :: - ms-expand. Следующее правило css должно восстановить внешний вид по умолчанию:

select::-ms-expand {
  background-color: #fff;
  border: none;
}