Bootstrap: Dropdown arrow of select looks rather ugly on Firefox

[jpswade]

As you're probably aware the select dropdown menus are ugly in Firefox.

• http://getbootstrap.com/css/#selects

On Windows 7 (x64), Firefox v37

This is not a new issue, the problem is also apparent on OS X:

• Bootstrap 3 Styled Select dropdown looks ugly in Firefox on OS X
• select form in firefox bit ugly #765

There are a number of third party solutions:

• SelectBoxIt
• Chosen
• bootstrap-select
• select2

However, as Bootstrap was originally described as "as a way to document and share common design patterns and assets". It would seem to me that this is a common design pattern issue and does sit within the scope of this project.

It is possible that this problem extends to Normalize.css, responsible for "render[ing] all elements more consistently" within Bootstrap.

In any case, solving this common problem would certainly bring us one step closer to making "front-end web development faster and easier".

[zacechola]

Duplicate of #7602. See also: #8029 (comment)

[jpswade]

@zacechola thanks, those links support the fact that this common design pattern problem exists.

[zacechola]

But the links also point out that it's not an issue Bootstrap intends to solve.

It may be an issue worth revisiting at some point, but styling selects to look consistent cross-browser almost certainly means supporting a series of browser hacks. @mdo can elaborate here more I'm sure.

Anyway, @filamentgroup maintains an experiment showing custom-styled selects which illustrates this better: https://github.com/filamentgroup/select-css

[patrickhlauke]

Yup, this is something that we're not likely to fix in v3. There's a possibility this will be addressed in v4 though, so punting for now.

[Hongbo-Miao]

@pamelafox

Bootstrap 4 alpha 3 select in Firefox 51.0a1 still shows not well.

[wolfy1339]

Usd the custom forms

[rdettai]

After a bit of struggle, I found a little workaround. I just put it here in case it helps someone:

select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: url(dropdown.ico) right / 20px no-repeat #fff;
        padding-right: 20px;
}

It first removes the native select then adds an icon of your choice. I used the very sober triangle that is used natively in chrome:

[kaburkett]

Now that version 4 is here, is this something to reopen? @patrickhlauke

[wolfy1339]

no, the custom forms component was created to look exactly the same across browsers. The default form component, is only styled slightly but doesn't override system defaults

[kaburkett]

Thanks @wolfy1339 ! I don't think it was mentioned that this style on firefox and safari was allowed by design- we find it pretty hideous in firefox, so we will just implement what's included in this thread.

[volomike]

Here's how to make it identical to Chrome without having to put an image in a directory.

/* FIREFOX FIX OF UGLY SELECT BOXES */
@supports (-moz-appearance:none) {

  SELECT
  {
  -moz-appearance:none !important;
  background: transparent url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat !important;
  background-position: calc(100% - 5px) center !important;
  }

}