Twitter Bootstrap选择箭头缺失

Question

我在twitter bootstrap中遇到选择下拉按钮的问题.它发生在我在机器上安装的两个浏览器(IE11,Chrome)中,并且它不仅限于"我的网站".

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

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

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

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

我找到了一个解决方案，添加此 CSS 并将“form-override”类放在每个选择下拉列表中：

.form-override {
  appearance: auto !important;
}

我不确定为什么它有效或为什么需要它，只是想分享我如何解决这个问题。对我来说，这似乎是零星的，有时会出现问题，我需要这个样式设置来修复它，有时则不需要这个修复。

Answer 3

用 供选择

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