Html 缺少Twitter引导选择箭头

我对twitter引导中的选择下拉按钮有问题。它发生在我安装在机器上的两个浏览器（IE11、Chrome）中，而且不仅仅局限于“我的网站”

以下是bootstrap网站（OS:Windows 8.1 Broswer:Chrome）（）的屏幕截图：

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

有人能帮我解释为什么会发生这种情况/解决的步骤吗？

TL；你不能用CSS来改变图标。您必须使用一个库，该库使用HTML和JavaScript实现类似选择的控件（以牺牲iOS和Android上的移动友好选择为代价）

中显示的图标由用户的浏览器或操作系统决定。您不能使用CSS更改它

选择Mac上的Chrome显示：

选择“在Mac电脑上以Chrome显示”并删除某些样式： 我删除了线条高度、背景色、边框、边框半径和框阴影。请注意，箭头已更改，即使我没有更改任何相关样式

选择在Windows上的Chrome中显示：

请注意，图标是不同的，即使代码是相同的

现在怎么办？ 虽然select不是非常可风格化的，但是有许多库提供了类似select控件的非常可定制的实现。我喜欢使用

此库创建了一个

，可以对其进行样式设置以更改图标。例如，在包含引导选择JavaScript后，将显示以下代码：

HTML

芥末
番茄酱
喜欢

CSS

.caret{
颜色：红色；
}

给我这个显示：

但是，您将丢失移动显示： 使用自定义库将禁用iOS和Android工具选择的移动友好方式，因此在继续之前，请确保自定义图标对您足够重要

用于选择

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

---

此时无法设置

元素本身的样式。每个浏览器都将其自己的样式应用于大多数表单元素

因此，您可以通过隐藏原始选择来创建自己的自定义选择，使用

ul

+

li

创建标记，并使用javascript实现

或

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

---

我在Windows 8.1上的IE中体验过这种行为。出于某种原因，IE在您开始设置

select

元素的样式时，会以不同的方式呈现箭头（引导主题通常会这样做）。即使是设置背景色这样简单的事情也会触发这种行为

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

---

您还可以为该放置设置glyphicondown@BhaumikShah不确定你的意思抱歉？嗨，你可以按照这个演示链接：箭头是由用户的浏览器选择的，不能用CSS更改。如果必须对其进行更改，则需要使用一个库，该库使用JS和HTML实现类似select的控件。看看我的答案。简单地说，你能-告诉我们，你得到了什么，你想实现什么除了

选择

样式之外，其余的都是混乱！感谢Joshua给出了全面的回答（很抱歉反应太晚，我想等我有时间好好消化一下！）。我理解你所说的用户浏览器和操作系统决定选择箭头的显示是什么意思。这也是我困惑的根源，因为问题中的屏幕截图是在Windows中运行Chrome的机器上，因此希望它复制您的屏幕截图以及我在任何其他运行Windows Chrome的机器上看到的内容？@Gareth不同版本的Windows可以对选择进行不同的样式设置。@Gareth还注意到某些CSS样式，如

box shadow

我认为，会导致浏览器使用不同的图标。谢谢，我曾试图在完全相同的操作系统和不同机器上的chrome版本中复制此问题，但无法重新创建此问题，这就是为什么我感到奇怪的原因？@Gareth可能一个浏览器或操作系统具有不同的设置或启用了某种可访问性模式。

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