Bootstrap 3 Styled Select 下拉列表在 OS X 上的 Firefox 中看起来很丑

当在 Bootstrap 3中设计一个表单 <select>元素时，它会在 OS X 上的 Firefox 中呈现一个丑陋的按钮:

Ugly select in Firefox on OS X

(http://bootply.com/98385)

这显然已经是一个众所周知的问题有一段时间了，有一些黑客和变通方法，其中没有一个是非常干净的(https://github.com/twbs/bootstrap/issues/765)。我想知道，除了使用 Bootstrap 下拉菜单或额外的插件之外，是否有人找到了解决这个问题的好办法。我有意选择使用 HTML <select>而不是 Bootstrap 下拉列表，因为在移动设备上使用长列表更好用。

这是 Firefox 的问题还是 Bootstrap 的问题？

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

更新12/4/13: 针对@zessx (使用 http://bootply.com/98425) ，我对每个浏览器在 OS X 10.9上使用 Firefox、 Chrome 和 Safari 呈现 <select>的方式进行了并行比较。显然，<select>表单元素在浏览器和操作系统之间的呈现方式有很大的不同:

Each browser renders the select element quite differently

我知道 <select>标记的处理方式会根据您使用的操作系统的不同而有所不同，因为有一些基于本机操作系统的控件可以规定样式和行为。但是，引导程序中的 class="form-control"是如何导致 <select>表单元素在 Firefox 中看起来不同的呢？为什么 Firefox 中默认的、未样式化的 <select>看起来不错，但是一旦它被样式化，它看起来就很丑陋？

131182 次浏览
小开

这是正常的行为，这是由 Firefox 默认的 <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;
}

布特普利

enter image description here

小开

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

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

小开

我相信 -webkit-appearance:none在 Chrome 和 Safari 上一定可以做到这一点。

编辑: -moz-appearance: none现在应该可以在 Firefox 上正常工作了。

小开

我在使用神选之子。 看看下面的 http://harvesthq.github.io/chosen/ :

它可以在 Firefox，Chrome，IE 和 Safari 上运行，但是不能在移动设备上运行。

小开

我找到了解决这个问题的两种可能的方法:

  1. 使用 被选中

  2. 针对像下面这样使用 @-moz-document url-prefix()的 mozilla 浏览器:

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

你可以在 IE 中改变下拉箭头周围的灰色方框:

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

enter image description here

小开

我们一直在使用插件 自举-选择为 Bootstrap 的 dtyling 选择。真的很好用，并且有很多有趣的附加特性。我可以肯定地推荐它。

小开

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

小开

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

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/

小开

这很简单，你只需要把这个放进 .form-control里面:

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

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

小开

以 Rafx和 新浪的优秀答案为基础，下面的代码片段只针对 Firefox，并将默认按钮替换为从 Bootstrap 的图标主题复制的向下插入符号。

以前:

default select

之后:

styled select

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

小开

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

文档在此: Bootstrap 4自定义窗体选择菜单


提交答案