Twitter Bootstrap Select 箭头丢失

Question

我在 Twitter bootstrap 中遇到 select 下拉按钮的问题。它发生在我安装在机器上的两个浏览器中（IE11，Chrome），它不仅限于 'my sites'.

这里是 bootstrap 网站的截图 (OS: Windows 8.1 Broswer: Chrome) (http://getbootstrap.com/css/#forms-controls):

我已经检查了控制台 window，所有资源都在正确加载。

谁能帮我解释为什么会这样/解决步骤？

Answer 1

TL;DR：您不能使用 CSS 来更改图标。您必须使用一个库，该库使用 HTML 和 JavaScript 实现类似 select 的控件（以 [=73= 上的移动友好 select 为代价] 和 Android).

<select>中显示的图标由用户的浏览器或操作系统决定。您不能使用 CSS.

更改它

Select 显示在 Chrome on a Mac:

Select 在 Mac 上显示在 Chrome 中，删除了一些样式：

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

Select 显示在 Chrome on Windows:

请注意，尽管代码相同，但图标不同。

现在怎么办？

虽然 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 实现 selects，因此请确保自定义图标足够重要你在继续之前。

Answer 2

对select

使用

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> 元素本身设置样式。每个浏览器都将自己的样式应用于大多数表单元素。

因此您可以通过隐藏原始的自定义 select 创建自己的自定义，创建标记，例如div 与 ul + li 一起生活 javascript.

或

如果您不介意使用 jQuery，试试这些库：

Answer 4

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

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

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

Answer 5

我找到了解决方案，添加这个 CSS 并在每个 select 下拉列表中添加 'form-override' class：

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

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

Twitter Bootstrap Select 箭头丢失

Twitter Bootstrap Select Arrow Missing

html

css