html - Twitter Bootstrap 选择箭头丢失

Question

我在使用 Twitter Bootstrap 中的选择下拉按钮时遇到问题。它发生在我安装在机器上的两个浏览器(IE11、Chrome)中，它不仅限于“我的网站”。

这是 Bootstrap 网站的屏幕截图(操作系统:Windows 8.1 浏览器: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 实现选择的移动友好方式，因此在继续之前确保自定义图标对您足够重要。