引导3风格select下拉菜单在OS X上的Firefox看起来很丑
在Bootstrap 3中对表单<select>元素进行样式化时，会在OS X上的Firefox中呈现难看的button：
（ http://bootply.com/98385 ）
这显然是一个已知的问题，有一些黑客和变通办法，其中没有一个是非常干净的（ https://github.com/twbs/bootstrap/issues/765 ）。 我想知道是否有人已经find了一个很好的解决scheme，而不是使用Bootstrap下拉菜单或额外的插件。 我故意select使用HTML <select>而不是Bootstrap下拉菜单，因为移动设备上的长列表的可用性更好。
这是一个Firefox问题或Bootstrap问题？
详细信息：Mac OS X 10.9，Firefox 25.0.1
更新12/4/13：我做了每个浏览器如何使用Firefox，Chrome和Safari在OS X 10.9上呈现<select>以回应@zessx（使用http：// bootply.com/98425 ）。 很显然，在浏览器和操作系统之间呈现<select>表单元素的方式有很大的不同：
我知道基于你使用的操作系统，一个<select>标签的处理方式是不同的，因为有基于操作系统的本地控件来规定样式和行为。 但是，Bootstrap中的class="form-control"是什么引起了Firefox中的<select>表单元素的不同呢？ 为什么Firefox中默认的，非样式的<select>看起来不错，但是一旦它变成风格，看起来很丑陋？
您实际上可以更改IE中下拉箭头周围的灰色框：
select::-ms-expand { width:12px; border:none; background:#fff; }
实际上，你可以使用下拉字段来做几乎所有的事情，并且在每个浏览器上看起来都是一样的，看看代码示例
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; }
在rafx和Sina的优秀答案的基础上 ，这是一个只针对Firefox的代码片段，并用从Bootstrap的图标主题复制的下载插件replace默认button。
之前：
后：
@-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具有反斜杠和换行符，如果它们在您的资产pipe道中造成麻烦，请将其删除。
这里是JSFiddle
有一个漂亮的jQuery插件，看起来很适合Bootstrap，叫做SelectBoxIt（ http://gregfranko.com/jquery.selectBoxIt.js/ ）。 我喜欢的东西是，它可以让你触发本地select框上的任何操作系统，同时仍然保持一致的样式（ http://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox ）。 哦，我多么希望Bootstrap提供这个选项！
唯一的缺点就是它在解决scheme中增加了另外一层复杂性，而且还需要额外的工作来确保随着时间的推移升级/修补所有其他插件的兼容性。 我也不确定Bootstrap 3的兼容性。 但是，这可能是一个很好的解决scheme，可以确保浏览器和操作系统的一致性。
这是正常的行为，它是由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; }
Bootply
我确定-webkit-appearance:none是Chrome和Safari的技巧。
编辑： -moz-appearance: none现在-moz-appearance: none应该在Firefox上工作。
这很容易。 你只需要放在里面.form-control这个：
.form-control{ -webkit-appearance:none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; }
这将删除浏览器的外观，并允许您的CSS。
我发现了解决这个特定问题的两种可能的方法：
-
使用select
-
使用
@-moz-document url-prefix()来定位mozilla浏览器，如下所示：
@-moz-document url-prefix() { select { padding: 5px; } }
我们一直使用插件bootstrapselect Bootstrap进行dtylingselect。 真的很好，并有很多有趣的附加function。 我可以肯定地推荐它。
我正在使用select。 看看： http : //harvesthq.github.io/chosen/
它适用于Firefox，Chrome，IE和Safari，风格相同。 但不在移动设备上。
你可以使用jquery.chosen或者bootstrap-select来为你的button添加样式。两者都很好。 警告使用select或引导select：他们都隐藏原来的select，并添加自己的ID与自己的ID。 如果你正在使用jquery.validate，例如，它不会find原来的select进行validation，因为它已被重命名。
