Bootstrap 3 Styled Select 下拉菜单在 OS X 上的 Firefox 中看起来很难看答案

【问题标题】：Bootstrap 3 Styled Select dropdown looks ugly in Firefox on OS XBootstrap 3 Styled Select 下拉菜单在 OS X 上的 Firefox 中看起来很难看
【发布时间】：2013-12-20 09:30:54
【问题描述】：

在 Bootstrap 3 中设置表单 <select> 元素的样式时，它会在 OS X 上的 Firefox 中呈现丑陋的按钮：

(http://bootply.com/98385)

这显然是一段时间以来的已知问题，并且有许多黑客和解决方法，其中没有一个非常干净（https://github.com/twbs/bootstrap/issues/765）。我想知道除了使用 Bootstrap 下拉菜单或额外插件之外，是否有人找到了解决此问题的好方法。我故意选择使用 HTML <select>'s 而不是 Bootstrap 下拉菜单，因为在移动设备上使用长列表时可用性更好。

这是 Firefox 问题还是 Bootstrap 问题？

详细信息：Mac OS X 10.9、Firefox 25.0.1

2013 年 12 月 4 日更新：我对使用 Firefox、Chrome 和 Safari 在 OS X 10.9 上的每个浏览器如何呈现 <select> 进行了并排比较，在回复@zessx（使用http://bootply.com/98425）。显然，<select> 表单元素在浏览器和操作系统之间的呈现方式存在很大差异：

我了解<select> 标签的处理方式会因您使用的操作系统而异，因为有基于操作系统的本机控件来决定样式和行为。但是，Bootstrap 中的 class="form-control" 是什么导致 <select> 表单元素在 Firefox 中看起来不同？为什么 Firefox 中默认的、未设置样式的 <select> 看起来还可以，但是一旦设置了样式，它就很难看？

【问题讨论】：

对于 FireFox 用户来说，这是正常的，并不丑陋。 Bootstrap 仅使用 CSS 来设置样式，不会使用脚本将选择转换为列表项，我相信 Foundation 会这样做。也看看 IE 看看那里发生了什么。不同的浏览器不会以相同的方式呈现表单元素。 Chrome 看起来最好。
FireFox 的原生选择在调整大小时会变得模糊，但它们看起来是这样的：jsbin.com/amimUhUg/1
谢谢，克里斯蒂娜。我可以接受 Firefox 的自定义样式 <select>，尽管它确实有点模糊。唯一的问题是，在 Chrome 和 Safari 中，它看起来仍然像默认的 <select> 元素——换句话说，自定义样式似乎只适用于 Firefox。（使用jsbin.com/amimUhUg/1）
好吧，你可以把选择 css 放在一个 webkit only 媒体查询 (atsign) 媒体屏幕和 (-webkit-min-device-pixel-ratio: 0) { } 然后不放任何样式选择在那之外，这样firefox和ie以及所有其他人都不会选择它们。一旦你在一个选择上添加了一个边框，firefox 就会在你的图像中为 BS3 执行第一列。
@ChristinaArasmoBeymer 作为 Firefox 用户，我发现 OS X 上的这些下拉按钮丑得要命；他们看起来直接从 Win95 出来

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这是正常现象，是火狐下默认<select>风格造成的：不能设置line-height，那么当你想要自定义<select>时需要在padding上玩.

例如，在 Firefox 25 / Chrome 31 / IE 10 下的结果：

<select>
  <option>Default</option>
  <option>Default</option>
  <option>Default</option>
</select>

<select class="form-control">
  <option>Bootstrap</option>
  <option>Bootstrap</option>
  <option>Bootstrap</option>
</select>

<select class="form-control custom">
  <option>Custom</option>
  <option>Custom</option>
  <option>Custom</option>
</select>

select.custom {
  padding: 0px;
}

Bootply

【讨论】：

感谢@zessx 的回复！在 Windows 上，<select> 显然是在不同浏览器之间呈现的，只有微小的差异。我可以忍受它；然而，在 OS X 上，Firefox 中的默认 <select> 与 Bootstrap 或自定义样式的 <select> 之间的差异是巨大的。选择选项右侧的 OS X 上的 Firefox 中灰色、扁平的按钮对于这个项目来说是完全不可接受的。每个像素都很重要。我意识到 OS X 上的 Firefox 用户可能只代表一小部分用户；但是，我需要一个在所有浏览器和操作系统中具有一致外观的解决方案。

【解决方案2】：

有一个看起来很漂亮的 jQuery 插件显然与 Bootstrap 配合得很好，叫做 SelectBoxIt (http://gregfranko.com/jquery.selectBoxIt.js/)。我喜欢它的一点是，它允许您在任何操作系统上触发本机选择框，同时仍保持一致的样式 (http://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox)。哦，我多么希望 Bootstrap 提供这个选项！

唯一的缺点是它在解决方案中增加了另一层复杂性，并且随着时间的推移升级/修补了所有其他插件以确保与所有其他插件的兼容性。我也不确定 Bootstrap 3 的兼容性。但是，这可能是一个很好的解决方案，可以确保跨浏览器和操作系统的外观保持一致。

【讨论】：

最初的问题是没有额外的插件。
问题是关于避免使用插件

【解决方案3】：

我确信 -webkit-appearance:none 可以为 Chrome 和 Safari 解决问题。

编辑：-moz-appearance: none 现在应该也可以在 Firefox 上运行。

【讨论】：

【解决方案4】：

我正在使用选择。看：http://harvesthq.github.io/chosen/

它适用于 Firefox、Chrome、IE 和 Safari，风格相同。但不在移动设备上。

【讨论】：

原帖明确表示不需要额外的插件
@TylerEich 有趣的是，最受好评的答案也是插件建议

【解决方案5】：

我发现了解决这个特定问题的两种潜在方法：

使用Chosen
使用 @-moz-document url-prefix() 定位 mozilla 浏览器，如下所示：

@-moz-document url-prefix() {
  select {
    padding: 5px;
  }
}

【讨论】：

【解决方案6】：

您实际上可以更改 IE 中下拉箭头周围的灰色框：

        select::-ms-expand {
            width:12px;
            border:none;
            background:#fff;
        }

【讨论】：

它在 IE 9 中有效吗？它对我不起作用..可能是什么问题？
问题是 IE9。检查此链接：stackoverflow.com/questions/19407332/…
这和关于firefox的问题有什么关系？

【解决方案7】：

我们一直在使用插件 bootstrap-select 来引导引导程序进行 dtyling 选择。真的很好用，并且有很多有趣的附加功能。我可以肯定地推荐它。

【讨论】：

你在 Bootstrap 3 中使用它吗？你能推荐一些第三版的东西吗？
要将其与 Ember 集成，建议查看 npmjs.com/package/ember-cli-select-picker

【解决方案8】：

您可以使用 jquery.chosen 或 bootstrap-select 为您的按钮添加样式。两者都很好用。使用 Chosen 或 bootstrap-select 的注意事项：它们都隐藏了原始选择并使用自己的 ID 添加了自己的 div。例如，如果您同时使用 jquery.validate ，它将找不到原始选择来进行验证，因为它已被重命名。

【讨论】：

【解决方案9】：

实际上你几乎可以用下拉字段做任何事情，而且它在每个浏览器上看起来都是一样的，看看代码示例

select.custom {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20fill%3D%22%23555555%22%20%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%22-261%20145.2%2024%2024%22%20style%3D%22enable-background%3Anew%20-261%20145.2%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M-245.3%2C156.1l-3.6-6.5l-3.7%2C6.5%20M-252.7%2C159l3.7%2C6.5l3.6-6.5%22%2F%3E%0A%3C%2Fsvg%3E");
  padding-right: 25px;
  background-repeat: no-repeat;
  background-position: right center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.custom::-ms-expand {
  display: none;
}

https://jsfiddle.net/x76j455z/10/

【讨论】：

对于任何想要使用此解决方案的人来说，%3... 是 ulr 编码的
没错，我正在使用一个简单的 sass mixin 来管理这个 svg，并且可以更改箭头颜色。这是它的来源：github.com/r4fx/mate/blob/master/src/styles/scss/… 要编码
查看这个优秀的新工具 URL-encoder 以获取 svg 图标 yoksel.github.io/url-encoder

【解决方案10】：

这很容易。你只需要在.form-control里面输入这个：

.form-control{
        -webkit-appearance:none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
}

这将删除浏览器的外观并允许您的 CSS。

【讨论】：

【解决方案11】：

基于 rafx 和 Sina 的出色回答，这里有一个 sn-p，它只针对 Firefox，并用从 Bootstrap 复制的向下插入符号替换默认按钮图标主题。

之前：

之后：

@-moz-document url-prefix() {
  select.form-control {
    padding-right: 25px;
    background-image: url("data:image/svg+xml,\
      <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
           height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\
        <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
      </svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 7px) 50%;
    -moz-appearance: none;
    appearance: none;
  }
}

（内联 SVG 具有反斜杠和换行符以提高可读性。如果它们在您的资产管道中造成问题，请删除它们。）

这里是JSFiddle

【讨论】：

我选择了这个解决方案，我认为最好的视图
更改此 svg 元素颜色的最佳方法是什么？编辑：通过调整fill rgb 值成功更改了下拉箭头的颜色。感谢您的回答@Tobia
@-moz-document url-prefix() 已停止工作，详情请参阅fxsitecompat.com/en-CA/docs/2018/…。我对替换选择器 _:-moz-tree-row(hover), select.form-control 很幸运，但我还不明白它是如何工作的。
@DaveMorse 你会认为，到目前为止，浏览器供应商会明白，有时你需要针对特定的平台或引擎......但不，他们拒绝在 CSS 中添加像 @browser (engine="Gecko") { ... } 这样的东西，因为“纯度”的原因。嗯。

【解决方案12】：

使用 Bootstrap 4+，您只需为您的选择输入添加类 custom-select 即可删除特定于浏览器的样式并保留箭头图标。

这里的文档：Bootstrap 4 Custom Forms Select Menu

【讨论】：