在设置表单样式时< select>元素在Bootstrap 3中,它在Firefox上的OS X上呈现一个丑陋的按钮:
这显然是一个已知的问题一段时间,并有一些黑客和解决方法,没有一个是非常干净的(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中看起来不同?为什么默认的非风格< select>在Firefox看起来不错,但一旦它得到风格,它看起来丑陋?
解决方法
您可以实际更改IE中下拉箭头周围的灰色框:
select::-ms-expand { width:12px; border:none; background:#fff; }