Настройка управления формой начальной загрузки при выборе опции
Я использую класс управления формой bootstrap, чтобы сохранить согласованный стиль между моим вводом формы и теми, которые требуют опции выбора. Однако использование элемента управления формой bootstrap для выбранных элементов дает уродливую кнопку раскрывающегося списка в firefox.
Чего я хотел бы добиться, так это
Однако, просматривая часть css, я не могу определить, какую часть я должен переопределить, поскольку, похоже, не существует css, определяющего украшение стрелки раскрывающегося списка.
Так выглядит текущий код
<div class = "form-group row">
<label for = "industry" class = "">Industry :</label>
<select name = "industry" class = "form-control">
<option value = "" disabled selected>Select Industry</option>
<option value = "financial-service">Financial Services</option>
<option value = "healthcare-lifescience">Healthcare & Life Science</option>
<option value = "communications">Communications</option>
</select>
</div>
Ответы 4
Проверьте -moz-appearanceздесь и установите его на none.
По умолчанию такие браузеры, как Chrome, Firefox и т. д., применяют стиль к элементам ввода, выборам, раскрывающимся спискам и т. д. Использование внешнего вида позволяет удалить этот стиль по умолчанию и применить собственный с использованием псевдоэлементов (уже сделано в Bootstrap в вашем конкретном случае). ).
Вы можете реализовать в нем Chosen (плагин jQuery для выбора). Он имеет множество функций, а также вы можете легко его спроектировать.
Ссылка: https://harvethq.github.io/выбранный/
В вашем коде:
<link
rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css"
/>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<div class = "form-group">
<label for = "industry" class = "">Industry :</label>
<select name = "industry" id = "industry" class = "form-control chosen-select">
<option value = "" disabled selected>Select Industry</option>
<option value = "financial-service">Financial Services</option>
<option value = "healthcare-lifescience">Healthcare & Life Science</option>
<option value = "communications">Communications</option>
</select>
</div>
<script>
$("#industry").chosen();
</script>
Найдите класс custom-select для начальной загрузки, так как вам будет проще стилизовать элемент select так, как вам нужно.
Однако предостережение заключается в том, что поддержка стилизации select/options довольно ограничена. Если вам нужен полный контроль, вам нужно будет использовать сторонний пакет, чтобы скрыть выбор на пользовательский выбор на основе html/javascript.
Проверьте мою ручку для вас. Он на 100% работает в Chrome, Firefox, Edge и Safari.
select.customDropdown::-ms-expand {
display: none;
}
select.customDropdown {
outline : none;
overflow : hidden;
text-indent : 0.01px;
text-overflow : '';
background : url("https://img.icons8.com/material/24/000000/sort-down.png") no-repeat right #fff;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class = "jumbotron container">
<div class = "row">
<div class = "col-md-6 offset-md-3">
<div class = "form-group row">
<label for = "industry" class = "">Industry :</label>
<select name = "industry" class = "form-control customDropdown">
<option value = "" disabled selected>Select Industry</option>
<option value = "financial-service">Financial Services</option>
<option value = "healthcare-lifescience">Healthcare & Life Science</option>
<option value = "communications">Communications</option>
</select>
</div>
</div>
</div>
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.js"></script>