Question

我在twitter bootstrap中遇到选择下拉按钮的问题。它发生在我在机器上安装的两个浏览器（IE11，Chrome）中，它不仅限于“我的网站”。

以下是bootstrap网站的截图（操作系统：Windows 8.1 Broswer：Chrome）（http://getbootstrap.com/css/#forms-controls）：

Example

我检查了控制台窗口，所有资源都正确加载。

任何人都可以帮助我解决为什么会这样做/要解决的步骤吗？

Answer 1

TL; DR：您无法使用CSS更改图标。您必须使用一个库，该库使用HTML和JavaScript实现类似选择的控件（以iOS和Android上的移动友好选择为代价）。

<select>中显示的图标由用户的浏览器或操作系统决定。您无法使用CSS更改它。

选择在Mac上的Chrome中显示：

在Mac上的Chrome中选择显示，并删除了一些样式：

我删除了行高，背景颜色，边框，边框半径和框阴影。请注意，即使我没有更改任何相关的样式，箭头也已更改。

选择在Windows上的Chrome中显示：

请注意，即使代码相同，图标也不同。

现在是什么？

尽管select不是非常可定制的，但是有许多库提供了类似select的控件的非常可定制的实现。我喜欢使用Bootstrap-select。

此库创建一个<div class="caret"></div>，可以设置样式以更改图标。例如，在包含Bootstrap-select JavaScript之后，使用以下代码：

HTML

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

CSS

.caret{
    color: red;
}

给我这个展示：

但是，您将丢失移动显示屏：

使用自定义库将禁用iOS和Android工具选择的移动设备友好方式，因此在继续操作之前，请确保自定义图标对您来说非常重要。

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

Answer 3

此时您无法设置<select>元素的样式。每个浏览器都将自己的样式应用于大多数表单元素。

因此，您可以通过隐藏原始自定义选择来创建自己的自定义选择，创建标记，例如使用div + ul li并使用javascript进行操作。

或

如果您不介意使用jQuery，请尝试以下这些库：

SelectBoxIt

Select2

Chosen

Bootstrap select

jquery-selectBox

jQuery UI

Answer 4

我在Windows 8.1上遇到过IE的这种行为。出于某种原因，只要您开始设置select元素（通常执行引导主题），IE就会以不同的方式呈现箭头。即使是设置背景颜色这样简单的事情也会触发此行为。

到目前为止，我发现的唯一解决方案是根据需要设置箭头样式。您可以使用::-ms-expand伪元素。以下css规则应恢复“默认”外观：

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

Twitter Bootstrap选择箭头缺失

4 个答案: