Bootstrap 3 Styled Select下拉菜单在OS X上的Firefox中看起来很丑陋 [英] Bootstrap 3 Styled Select dropdown looks ugly in Firefox on OS X

问题描述

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

（ 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 / p>

更新12/4/13：我并排比较了每个浏览器呈现 ;在OS X 10.9上使用Firefox，Chrome和Safari在响应@zessx时选择> （使用 http://bootply.com/98425 ）。显然，在< select> 表单元素如何在浏览器和操作系统之间有很大的区别：

我理解，根据您使用的操作系统，< select> 标记的处理方式不同，因为有基于操作系统的控制来决定样式和行为。但是，在Bootstrap中 class =form-control是什么引起< select> 看起来不同在Firefox？为什么Firefox中的默认非风格< select> 看起来不错，但是一旦获得样式，看起来很丑陋？

解决方案

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

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

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

(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.

Is this a Firefox problem or a Bootstrap problem?

Details: 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:

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?

解决方案

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

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

这篇关于Bootstrap 3 Styled Select下拉菜单在OS X上的Firefox中看起来很丑陋的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！