Twitter Bootstrap 选择箭头丢失

Posted 2023-03-05

【中文标题】Twitter Bootstrap 选择箭头丢失

【英文标题】：Twitter Bootstrap Select Arrow Missing

【发布时间】：2015-09-15 03:20:34

【问题描述】：

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

这是引导网站的截图（操作系统：Windows 8.1 浏览器：Chrome）（http://getbootstrap.com/css/#forms-controls）：

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

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

【问题讨论】：

您还可以为该下拉菜单设置 glyphicon

@BhaumikShah 不明白你的意思抱歉？

您好，您可以点击此演示链接：codeply.com/go/eQvhveHIU2

箭头由用户的浏览器选择，不能使用 CSS 更改。如果您必须更改它，您将需要使用一个使用 JS 和 html 实现类选择控件的库。看我的回答。

简单来说，请您告诉我们，您将获得什么以及您想要实现什么！ - 除了Select 造型，其余都是混乱！

【参考方案1】：

TL;DR：您不能使用 CSS 来更改图标。您必须使用一个使用 HTML 和 javascript 实现类选择控件的库（以牺牲 ios 和 android 上的移动友好选择为代价）。

<select> 中显示的图标由用户的浏览器或操作系统决定。您无法使用 CSS 更改它。

在 Mac 上的 Chrome 中选择显示：

在 Mac 上的 Chrome 中选择显示并删除了一些样式：

我删除了 line-height、background-color、border、border-radius 和 box-shadow。请注意，即使我没有更改任何相关样式，箭头也已更改。

在 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 实现选择的移动友好方式，因此请确保自定义图标对您来说足够重要，然后再继续。

【讨论】：

感谢 Joshua 的全面回答（抱歉迟到的回复想等我有时间好好消化！）。我了解您对用户浏览器和操作系统确定选择箭头的显示的含义。这也是我困惑的根源，因为问题中的屏幕截图是在 Windows 中运行 Chrome 的机器上，因此希望它能够复制您的屏幕截图以及我在任何其他运行 chrome 的 Windows 机器上看到的内容？跨度>

@Gareth 不同版本的 Windows 可以设置不同的样式。

@Gareth 另请注意，更改某些 CSS 样式，例如 box-shadow，我认为会导致浏览器使用不同的图标。

谢谢，我试图在另一台机器上的完全相同的操作系统和 chrome 版本中复制该问题，但无法重现该问题，这就是为什么它对我来说很奇怪？

@Gareth 可能一个浏览器或操作系统有不同的设置或启用了某些可访问性模式。

【参考方案2】：

使用 进行选择

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;

【参考方案3】：

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

.form-override 
  appearance: auto !important;

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

【讨论】：

这对我有用！

【参考方案4】：

此时您无法设置<select> 元素本身的样式。每个浏览器都将自己的样式应用于大多数表单元素。

因此您可以通过隐藏原始选择创建自己的自定义选择，创建标记，例如div 与 ul + li 并使用 javascript 实现它。

或

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

SelectBoxIt Select2 Chosen Bootstrap select jquery-selectBox jQuery UI

【参考方案5】：

我曾在 Windows 8.1 上使用 IE 体验过这种行为。出于某种原因，只要您开始设置 select 元素的样式（引导程序主题通常会这样做），IE 就会以不同的方式呈现箭头。即使是像设置背景颜色这样简单的事情也会触发这种行为。

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

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