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

Bootstrap 3 Styled Select dropdown looks ugly in Firefox on OS X

提问by bhall

When styling a form <select>element in Bootstrap 3, it renders an ugly button on the in Firefox on OS X:

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

(http://bootply.com/98385)

( http://bootply.com/98385)

This has apparently been a known issue for a while, and there are a number of hacks and workarounds, none of which are very clean (https://github.com/twbs/bootstrap/issues/765). I'm wondering if anyone has found a good solution to this issue other than using Bootstrap dropdowns or extra plug-ins. I have deliberately chosen to use HTML <select>'s rather than Bootstrap dropdowns because usability is better with long lists on mobile devices.

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

Is this a Firefox problem or a Bootstrap problem?

这是 Firefox 问题还是 Bootstrap 问题？

Details: Mac OS X 10.9, Firefox 25.0.1

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

Update 12/4/13:I did a side-by-side comparison of how each browser renders the <select>'s on OS X 10.9 using Firefox, Chrome, and Safari, in response to @zessx (using http://bootply.com/98425). Obviously, there is a big difference between how the <select>form element is rendered across browsers and OS's:

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

I understand that a <select>tag is handled differently based on what OS you are using, as there are native OS-based controls that dictate the styling and behavior. But, what is it about class="form-control"in Bootstrap that causes a <select>form element to look different in Firefox? Why does the default, un-styled <select>in Firefox look okay, but once it gets styled, it looks ugly?

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

回答by mnsr

You can actually change the grey box around the dropdown arrow in IE:

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

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

回答by rafx

Actualy you can do almost everything with dropdown field, and it will looks the same on every browser, take a look at code example

实际上，您几乎可以使用下拉字段执行所有操作，并且在每个浏览器上看起来都相同，请查看代码示例

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/

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

回答by Tobia

Building on the excellent answers by rafxand Sina, here is a snippet that only targets Firefox and replaces the default button with a down-caret copied from Bootstrap's icon theme.

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

Before:

前：

After:

后：

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

(The inline SVG has backslashes and newlines for readability. Remove them if they cause trouble in your asset pipeline.)

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

Here is the JSFiddle

这是JSFiddle

回答by bhall

There is a slick-looking jQuery plugin that apparently plays nice with Bootstrap called SelectBoxIt (http://gregfranko.com/jquery.selectBoxIt.js/). The thing I like about it is that it allows you to trigger the native select box on whatever OS you are on while still maintaining a consistent styling (http://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox). Oh how I wish Bootstrap provided this option!

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

The only downside to this is that it adds another layer of complexity into a solution, and additional work to ensure compatibility with all other plug-ins as they get upgraded/patched over time. I'm also not sure about Bootstrap 3 compatibility. But, this may be a good solution to ensure a consistent look across browsers and OS's.

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

回答by Tim Nguyen

I'm sure -webkit-appearance:nonedoes the trick for Chrome and Safari.

我敢肯定-webkit-appearance:noneChrome 和 Safari 的技巧。

EDIT : -moz-appearance: noneshould now work as well on Firefox.

编辑：-moz-appearance: none现在应该在 Firefox 上也能正常工作。

回答by zessx

This is the normal behavior, and it's caused by the default <select>style under Firefox : you can't set line-height, then you need to play on paddingwhen you want to have a customized <select>.

这是正常现象，是<select>Firefox 下的默认样式导致的：您无法设置line-height，那么您需要padding自定义<select>.

Example, with results under Firefox 25 / Chrome 31 / IE 10 :

例如，在 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

引导

回答by Ivijan Stefan Stipi?

This is easy. You just need to put inside .form-controlthis:

这很简单。你只需要把.form-control这个：

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

This will remove browser's appearance and allow your CSS.

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

回答by aahoogendoorn

We have been using the plugin bootstrap-selectfor Bootstrap for dtyling selects. Really works well and has lots of interesting additional features. I can recommend it for sure.

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

回答by Braden Heckman

With Bootstrap 4+, you can simply add the class custom-selectfor your select inputs to drop the browser-specific styling and keep the arrow icons.

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

Documentation Here: Bootstrap 4 Custom Forms Select Menu

此处的文档：Bootstrap 4 自定义表单选择菜单

回答by Sina

I found two potential ways of solving this specific problem:

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

1. Use Chosen

2. Target mozilla browsers using @-moz-document url-prefix()like so:

1. 使用选择

2. 使用@-moz-document url-prefix()如下方式定位 mozilla 浏览器：

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