在Bootstrap 3中设置表单<select>
元素样式时,它会在OS X上的Firefox中呈现一个丑陋的按钮:
这显然是一段时间已知的问题,并且有许多黑客和变通方法,其中没有一个非常干净(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:我对每个浏览器如何使用Firefox,Chrome和Safari在OS X 10.9上呈现<select>
进行了并排比较,响应@zessx(使用http://bootply.com/98425)。显然,跨浏览器和操作系统呈现<select>
表单元素的方式有很大差异:
我理解<select>
标记的处理方式与您使用的操作系统不同,因为有基于操作系统的本机控件可以指示样式和行为。但是,在Bootstrap中class="form-control"
是什么导致<select>
表单元素在Firefox中看起来不同?为什么Firefox中默认的,未设置样式的<select>
看起来没问题,但是一旦它被设置样式,它看起来很难看?
答案 0 :(得分:27)
您实际上可以更改IE中下拉箭头周围的灰色框:
select::-ms-expand {
width:12px;
border:none;
background:#fff;
}
答案 1 :(得分:23)
Actualy你可以用下拉字段做几乎所有事情,并且它在每个浏览器上看起来都一样,看看代码示例
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;
}
答案 2 :(得分:19)
基于 rafx 和新浪的优秀答案,这是一个仅针对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
答案 3 :(得分:8)
有一个外观漂亮的jQuery插件显然与Bootstrap一起使用,名为SelectBoxIt(http://gregfranko.com/jquery.selectBoxIt.js/)。我喜欢的是它允许你在你所使用的任何操作系统上触发本机选择框,同时仍然保持一致的样式(http://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox)。哦,我希望Bootstrap提供这个选项!
唯一的缺点是它会在解决方案中增加另一层复杂性,以及确保与所有其他插件兼容的额外工作,因为它们会随着时间的推移而升级/修补。我也不确定Bootstrap 3的兼容性。但是,这可能是确保浏览器和操作系统的一致外观的良好解决方案。
答案 4 :(得分:7)
这是正常行为,它是由Firefox下的默认<select>
样式引起的:您无法设置line-height
,那么当您需要时,需要在padding
上播放有一个定制的<select>
。
示例,在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 强>
答案 5 :(得分:7)
我确信-webkit-appearance:none
可以解决Chrome和Safari问题。
编辑:-moz-appearance: none
现在应该可以在Firefox上运行。
答案 6 :(得分:2)
这很容易。你只需要把.form-control
放进去:
.form-control{
-webkit-appearance:none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
这将删除浏览器的外观并允许您使用CSS。
答案 7 :(得分:1)
我找到了解决这个特定问题的两种可能方法:
使用Chosen
使用@-moz-document url-prefix()
定位mozilla浏览器,如下所示:
@-moz-document url-prefix() {
select {
padding: 5px;
}
}
答案 8 :(得分:1)
我们一直使用Bootstrap的插件bootstrap-select进行样式选择。真的很好,并有很多有趣的附加功能。我可以肯定地推荐它。
答案 9 :(得分:0)
我正在使用Chosen。 请看:http://harvesthq.github.io/chosen/
适用于Firefox,Chrome,IE和Safari,风格相同。但不是在移动设备上。
答案 10 :(得分:0)
使用 Bootstrap 4 + ,您只需为选择的输入添加类custom-select
,即可删除特定于浏览器的样式并保留箭头图标。
答案 11 :(得分:-2)
您可以使用jquery.chosen或bootstrap-select为您的按钮添加样式。工作得很好。注意使用选择或引导选择:它们都隐藏原始选择并使用自己的ID添加自己的div。例如,如果您正在使用jquery.validate,那么它将不会找到原始选择进行验证,因为它已被重命名。