Bootstrap 3 Styled Select dropdown looks ugly in Firefox on OS X
css, twitter-bootstrap, twitter-bootstrap-3
Solution
You can actually change the grey box around the dropdown arrow in IE:
select::-ms-expand {
width:12px;
border:none;
background:#fff;
}
Problem
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?