select form in firefox bit ugly

[mabuse]

The select form in chrome is displayed beatifully compared to firefox (at least my version 6.0.2) where you see an "ugly" arrow.

I am not sure whether it can be solved or not and it isn't actually a bug.. It also happens in twitter preferences.

[tommymorgan]

What operating system are you using? I use Windows 7 and the select element looks the same in Chrome and Firefox.

[pokonski]

This is Gecko's issue on Linux, I believe.

Firefox 8.0 on Fedora 16:

Also on a sidenote your Firefox is outdated. It's already 8.0, not 6.

[mabuse]

Yep, you are right.

The image you provided is the same issue I've seen. Same happens in twitter

I use ubuntu 11.04 with xfce and firefox 6.0.2 (outdated it seems).

[pokonski]

I think there's no fix for that, Firefox simply does not allow styling that arrow.

EDIT: Just checked on Windows. This does not work at all in Firefox.

[mabuse]

I believe It can be in someway solved. In twitter preferences, if you disable following lines:

border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;

The select displays nicer

[pokonski]

But if you disable that you will ruin the looks on everything else.

[mabuse]

That's right.. It does not seem to have an easy solution. At least, if we want to avoid using browser tweaks.

[dubcanada]

I don't think using a browser hack for less then 1% of the viewers is really wise. But that's just my thought.

[mabuse]

It seems all firefox versions are affected (please check). Windows included. It means at least 25% market share. anyway, as I told before it is not that important. Only a little issue.

[dubcanada]

Select looks fine in Firefox on Windows.

[mabuse]

If the issue only happens in linux and firefox it is not that important. We can close it

[leoromanovsky]

This issue is also present on Firefox for OSX. I have the most recently updated version of FF.

The problem goes away and the default Firefox style is restored when the:

border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;

Styles are disabled.

[mdo]

The image that @pokonski provided is how the fields are intended to look (though they should be white, and I believe that's fixed in 2.0-wip).

[pokonski]

Yes, my screenshot is from an older version.

[joeguo]

Select form looks really ugly on Firefox 10.02 & Safari 5.1.2

[gerrywastaken]

@markdotto

The image that @pokonski provided is how the fields are intended to look...

Padding between the element's border and the dropdown arrow element control is quite inconsistent when compared with something like the multiple selection input which has no space between it's border and element control. Other elements such as the button append also have no padding between the border and element control.

If you had said that this is just a limitation of Firefox on Linux then that would be fine, but saying that's "how the fields are intended to look" is disingenuous and will lead to it never getting addressed as people will just think it's a bad bootstrap design decision which somebody is probably religious about instead of something that just needs fixing (possibly in Gecko).

[gerrywastaken]

At last, sexy selects: https://github.com/silviomoreto/bootstrap-select

[jacob-carlborg]

It looks the same on Mac OS X 10.6.3 using Firefox 20. It looks even more horrible in Chrome 26 and Safari.

@gerrywastaken nice styling for the selects.

[d-rikhtehgaran]

same issue on firefox 20 linux mint14

[jacand]

Have the exact same issue on FF 22.0 on OSX 10.8.4

[old-account]

same issue on Firefox 23.0 on OSX 10.8.4

[tejl]

Same issue on FF 20.0 on Ubuntu 11.10 (yes out dated)

[sinak]

I found two ways of solving this:

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

@-moz-document url-prefix() {
select {
    padding: 5px;
  }
  }