Bootstrap 3 Styled Select dropdown looks ugly in Firefox on OS X

Question

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?

Answer 1

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

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

Answer 2

Building on the excellent answers by rafx and Sina, here is a snippet that only targets Firefox and replaces the default button with a down-caret copied from Bootstrap's icon theme.

Before:

After:

@-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;   } } 

(The inline SVG has backslashes and newlines for readability. Remove them if they cause trouble in your asset pipeline.)

Here is the JSFiddle