72

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?

bhall
  • 1,391
  • 3
  • 14
  • 19
  • 2
    To a FireFox user, that is normal and not ugly. Bootstrap only uses CSS to style and won't use scripting to turn that select into a list item, I believe that Foundation does. Also look in IE an see what happens there. Different browsers do not render form elements the same way. Chrome looks the best. – Christina Dec 04 '13 at 05:01
  • FireFox's native selects get blurry if you size them, but here's what they look like: http://jsbin.com/amimUhUg/1/ – Christina Dec 04 '13 at 05:17
  • Thanks, Christina. I could live with that custom styled `` element--in other words, the custom styles only seem to work for Firefox. (using http://jsbin.com/amimUhUg/1/) – bhall Dec 04 '13 at 15:41
  • well, you could put the select css inside a webkit only media query (atsign)media screen and (-webkit-min-device-pixel-ratio: 0) { } then put no styles on the select outside that, that way firefox and ie and all others won't pick them up. Once you stick a border on a select, firefox just does that first column in your image for BS3. – Christina Dec 04 '13 at 16:07
  • 2
    @ChristinaArasmoBeymer as a Firefox user, I find these dropdown buttons on OS X ugly as hell; they look straight out of Win95 – Daniel Serodio May 13 '14 at 20:21

12 Answers12

27

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

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

enter image description here

mnsr
  • 12,337
  • 4
  • 53
  • 79
25

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:

default select

After:

styled select

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

Tobia
  • 17,856
  • 6
  • 74
  • 93
  • i choosed this solution, best view i think – yussan Feb 20 '17 at 03:49
  • 1
    What's the best way to change the color of this svg element? Edit: successfully changed the color of the dropdown arrow by adjusting the `fill` rgb values. Thanks for this answer @Tobia – kjones Mar 11 '17 at 09:26
  • 1
    `@-moz-document url-prefix()` has stopped working, see https://www.fxsitecompat.com/en-CA/docs/2018/moz-document-support-has-been-dropped-except-for-empty-url-prefix/ for details. I'm having luck with the replacement selector `_:-moz-tree-row(hover), select.form-control` but I don't understand how it works yet. – Dave Morse Sep 26 '18 at 09:27
  • 1
    @DaveMorse You would think that by now, browser vendors would understand that sometimes you need to target specific platforms or engines... but no, they refuse to add anything like `@browser (engine="Gecko") { ... }` to CSS, for "purity" reasons. Meh. – Tobia Oct 01 '18 at 04:10
24

Actualy you can do almost everything with dropdown field, and it will looks the same on every browser, take a look at code example 

select.custom {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20fill%3D%22%23555555%22%20%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%22-261%20145.2%2024%2024%22%20style%3D%22enable-background%3Anew%20-261%20145.2%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M-245.3%2C156.1l-3.6-6.5l-3.7%2C6.5%20M-252.7%2C159l3.7%2C6.5l3.6-6.5%22%2F%3E%0A%3C%2Fsvg%3E");
  padding-right: 25px;
  background-repeat: no-repeat;
  background-position: right center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.custom::-ms-expand {
  display: none;
}

https://jsfiddle.net/x76j455z/10/

r4fx
  • 652
  • 5
  • 12
  • For anyone who wants to use this solution the %3... is the xml content ulr encoded. – Juan Jul 21 '16 at 22:09
  • Exactly, i'm using a simple sass mixin to manage this svg with possibility to change arrows color. Here is a source of it: https://github.com/r4fx/mate/blob/master/src/styles/scss/_toolbox.scss#L450 To encode xml you can use online generator like http://pressbin.com/tools/urlencode_urldecode/ – r4fx Jul 27 '16 at 22:48
  • Check this excellent new tool URL-encoder for svg icons https://yoksel.github.io/url-encoder/ – r4fx Oct 26 '17 at 22:44
8

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.

bhall
  • 1,391
  • 3
  • 14
  • 19
8

I'm sure -webkit-appearance:none does the trick for Chrome and Safari.

EDIT : -moz-appearance: none should now work as well on Firefox.

Tim Nguyen
  • 1,163
  • 10
  • 21
7

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

zessx
  • 68,042
  • 28
  • 135
  • 158
  • Thanks @zessx for the reply! On Windows, `` in Firefox and a Bootstrap- or custom-styled ` – bhall Dec 04 '13 at 15:24
3

This is easy. You just need to put inside .form-control this:

.form-control{
        -webkit-appearance:none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
}

This will remove browser's appearance and allow your CSS.

Ivijan Stefan Stipić
  • 6,249
  • 6
  • 45
  • 78
2

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

Braden Heckman
  • 91
  • 1
  • 2
1

I found two potential ways of solving this specific problem:

  1. Use Chosen

  2. Target mozilla browsers using @-moz-document url-prefix() like so:

@-moz-document url-prefix() {
  select {
    padding: 5px;
  }
}
Sina
  • 398
  • 1
  • 3
  • 10
1

We have been using the plugin bootstrap-select for Bootstrap for dtyling selects. Really works well and has lots of interesting additional features. I can recommend it for sure.

aahoogendoorn
  • 444
  • 6
  • 9
0

I am using Chosen. Look at: http://harvesthq.github.io/chosen/

It works on Firefox, Chrome, IE and Safari with the same style. But not on Mobile Devices.

skip2me99
  • 19
  • 2
-2

You can use jquery.chosen or bootstrap-select to add style to your buttons.Both work great. Caveat for Using Chosen or bootstrap-select: they both hide the original select and add in their own div with its own ID. If you are using jquery.validate along with this, for instance, it wont find the original select to do its validation on because it has been renamed.

user2729502
  • 1
  • 1