引导选择选项下拉箭头未显示

Question

我使用类form-control的引导选择选项字段

这是我的代码：

<select class="form-control" onchange="location = this.value;">
            <option>Select a Generic Name</option>
            <option value="1">Title 1</option>
            <option value="2">Title 2</option>
 </select>

但在下拉选项中没有显示向下箭头图标

CSS：

.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}

显示此图标的主要问题是什么？

Answer 1

如果您使用的是 Bootstrap v5，则标记已更改为

<select class="form-select">

Answer 2

我在 bootstrap-select 字段中遇到了同样的问题。这是一个绝对解决问题的简单类。

在 form-control 类旁边添加 form-select 类。

<select class="form-control form-select">
    <option>Select a Generic Name</option>
    <option value="1">Title 1</option>
    <option value="2">Title 2</option>
 </select>

Answer 3

它使用以下方式对我有用： （以下编辑修复了 Chrome 中的问题）

select.form-control { -webkit-appearance: menulist; }

Answer 4

您好，我尝试使用您的示例代码重现此问题。
但我在结果中没有遇到任何指定的箭头缺失问题。

.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}

<select class="form-control" onchange="location = this.value;">
            <option>Select a Generic Name</option>
            <option value="1">Title 1</option>
            <option value="2">Title 2</option>
 </select>

注意： 确保以下 css 未用于选择下拉菜单。

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}

希望对您有所帮助。

Answer 5

我在 bootstrap-select 字段中遇到了同样的问题。 这是一个绝对解决问题的简单类。

在 form-control 类旁边添加 custom-select 类。

  <select class="form-control custom-select">
        <option>Select a Generic Name</option>
        <option value="1">Title 1</option>
        <option value="2">Title 2</option>
     </select>

它将显示一个箭头符号，根据您使用的浏览器和操作系统，其外观可能会有所不同。

Answer 6

具有 "form-control" 类的元素的 "appearance" 属性默认设置为 'none'。因此，如果您想在引导程序中为选择标签显示插入符号（下拉符号），您必须 override BOOTSTRAP 具有以下 css 的样式。

select.form-control{
    -webkit-appearance: menulist!important;
    -moz-appearance: menulist!important;
    -ms-appearance: menulist!important;
    -o-appearance: menulist!important;
    appearance: menulist!important;
}

<!--CDNs of External Libraries to load bootstrap-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<!--Select Tag in html-->
<select class="form-control">
  <option value="">Select Option</option>
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
  <option value="Option 4">Option 4</option>
  <option value="Option 5">Option 5</option>
</select>