Html Twitter Bootstrap 选择箭头丢失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31102515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Select Arrow Missing
提问by Gareth
I'm having an issue with the select drop down button in twitter bootstrap. It's happening in the two browsers I have installed on the machine (IE11, Chrome) and it's not just restricted to 'my sites'.
我在 Twitter 引导程序中的选择下拉按钮有问题。它发生在我在机器上安装的两个浏览器（IE11、Chrome）中，它不仅限于“我的网站”。
Here is a screenshot of the bootstrap website (OS: Windows 8.1 Broswer: Chrome) (http://getbootstrap.com/css/#forms-controls):
这是引导程序网站的屏幕截图（操作系统：Windows 8.1 浏览器：Chrome）（http://getbootstrap.com/css/#forms-controls）：
I have checked the console window and all resources are loading correctly.
我检查了控制台窗口，所有资源都正确加载。
Could anyone help me with why this is happening / steps to resolve?
谁能帮我解释为什么会发生这种情况/解决步骤？
采纳答案by Joshua Dwire
TL;DR: you can't use CSS to change the icon. You'll have to use a library that implements a select-like control using HTML and JavaScript (at the expense of mobile-friendly selects on iOS and Android).
TL;DR：您不能使用 CSS 来更改图标。您必须使用一个使用 HTML 和 JavaScript 实现类选择控件的库（代价是 iOS 和 Android 上的移动友好选择）。
The icon displayed in <select>is determined by the user's browser or operating system. You can't change it using CSS.
中显示的图标<select>由用户的浏览器或操作系统决定。您无法使用 CSS 更改它。
Select display in Chrome on a Mac:
在 Mac 上的 Chrome 中选择显示：
Select display in Chrome on a Mac with some styles removed:
选择在 Mac 上的 Chrome 中显示删除了一些样式：
I removed line-height, background-color, border, border-radius, and box-shadow. Note that the arrow has changed even though I didn't change any related style.
我删除了 line-height、background-color、border、border-radius 和 box-shadow。请注意，即使我没有更改任何相关样式，箭头也已更改。
Select display in Chrome on Windows:
在 Windows 上的 Chrome 中选择显示：
Notice that the icons are different, even though the code is the same.
请注意，即使代码相同，图标也是不同的。
Now what?
怎么办？
Although select isn'g very styleable, there are many libraries that provide a very customizable implementation of a select-like control. I like to use Bootstrap-select.
尽管 select 的样式非常有风格，但有许多库提供了一个类似 select 的控件的非常可定制的实现。我喜欢使用Bootstrap-select。
This library creates a <div class="caret"></div>that can be styled to change the icon. For example after including the Bootstrap-select JavaScript, the following code:
这个库创建了一个<div class="caret"></div>可以改变图标的样式。例如在包含 Bootstrap-select JavaScript 之后，以下代码：
HTML
HTML
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
CSS
CSS
.caret{
color: red;
}
Gives me this display:
给我这个显示：
You'll lose mobile display, though:
但是，您将丢失移动显示：
Using a custom library will disable the mobile-friendly way iOS and Android implement selects, so make sure a custom icon is important enough to you before proceeding.
使用自定义库将禁用 iOS 和 Android 实现选择的移动友好方式，因此在继续之前请确保自定义图标对您足够重要。
回答by Saran
Use 
for 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;
}
回答by vbarinov
You can't style the <select>element itself at this moment. Every browser applies its own styling to most form elements.
您目前无法设置<select>元素本身的样式。每个浏览器都将自己的样式应用于大多数表单元素。
So you can create your own custom select by hiding the original one, create markup, e.g. divwith ul+ liand live it up with javascript.
因此，您可以通过隐藏原始选择来创建自己的自定义选择，创建标记，例如div使用ul+li并使用 javascript 实现它。
OR
或者
If you don't mind using jQuery, try these libraries:
如果您不介意使用 jQuery，请尝试以下库：
回答by a better oliver
I have experienced that behavior with IE on Windows 8.1. For some reason IE renders the arrow differently as soon as you start to style the selectelement (which bootstrap themes usually do). Even something as simple as setting the background color triggers this behavior.
我在 Windows 8.1 上使用 IE 遇到过这种行为。出于某种原因，一旦您开始为select元素设置样式（引导主题通常会这样做），IE 就会以不同的方式呈现箭头。即使像设置背景颜色这样简单的事情也会触发这种行为。
The only solution I've found so far is to style the arrow as needed. You can use the ::-ms-expandpseudo element for that. The following css rule should restore the "default" look:
到目前为止，我找到的唯一解决方案是根据需要设置箭头样式。您可以为此使用::-ms-expand伪元素。以下 css 规则应恢复“默认”外观：
select::-ms-expand {
background-color: #fff;
border: none;
}
