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

user_557928 0
Viewed 131137

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

Ugly select 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:

Each browser renders the select element quite differently

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?

twitter-bootstrap-3 twitter-bootstrap css
12 Answers

There is a slick-looking jQuery plugin that apparently plays nice with Bootstrap called SelectBoxIt (http://gregfranko.com/jquery.selectBoxIt.js/). The thing I like about it is that it allows you to trigger the native select box on whatever OS you are on while still maintaining a consistent styling (http://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox). Oh how I wish Bootstrap provided this option!

The only downside to this is that it adds another layer of complexity into a solution, and additional work to ensure compatibility with all other plug-ins as they get upgraded/patched over time. I'm also not sure about Bootstrap 3 compatibility. But, this may be a good solution to ensure a consistent look across browsers and OS's.

user_5579280

This is the normal behavior, and it's caused by the default <select> style under Firefox : you can't set line-height, then you need to play on padding when you want to have a customized <select>.

Example, with results under 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

enter image description here

user_12380190

With Bootstrap 4+, you can simply add the class custom-select for your select inputs to drop the browser-specific styling and keep the arrow icons.

Documentation Here: Bootstrap 4 Custom Forms Select Menu

user_101493670
Related