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

Question

When styling a form  lt select gt  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  lt select gt  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  lt select gt  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  lt select gt  form element is rendered across browsers and OS s     I understand that a  lt select gt  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  lt select gt  form element to look different in Firefox  Why does the default  un-styled  lt select gt  in Firefox look okay  but once it gets styled  it looks ugly

User · Answer

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

User · Answer

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 · Answer

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

User · Answer

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          lt 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   gt            lt path d  M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z   gt          lt  svg gt         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

User · Answer

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

User · Answer

I found two potential ways of solving this specific problem    Use Chosen Target mozilla browsers using  -moz-document url-prefix   like so     -moz-document url-prefix       select       padding  5px

User · Answer

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 · Answer

This is the normal behavior  and it s caused by the default  lt select gt  style under Firefox   you can t set line-height  then you need to play on padding when you want to have a customized  lt select gt    Example  with results under Firefox 25   Chrome 31   IE 10     lt select gt     lt option gt Default lt  option gt     lt option gt Default lt  option gt     lt option gt Default lt  option gt   lt  select gt    lt select class  form-control  gt     lt option gt Bootstrap lt  option gt     lt option gt Bootstrap lt  option gt     lt option gt Bootstrap lt  option gt   lt  select gt    lt select class  form-control custom  gt     lt option gt Custom lt  option gt     lt option gt Custom lt  option gt     lt option gt Custom lt  option gt   lt  select gt      select custom     padding  0px      Bootply

User · Answer

I m sure -webkit-appearance none does the trick for Chrome and Safari   EDIT   -moz-appearance  none should now work as well on Firefox

User · Answer

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

User · Answer

You can actually change the grey box around the dropdown arrow in IE           select  -ms-expand               width 12px              border none              background  fff

User · Answer

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

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

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3