Firefox overriding style of html select option

Question

Ok, so this has been annoying me now for some time and I can not figure out what is causing this. I am wondering if anyone else is having this issue or noticed this.

In my css I have the html select options styled to look similar to this

On some computers it looks like how I've styled it and on some it appears something is overriding the style and then it looks like this

Some facts so far to help determine what is causing this. All the computers I've tested are running windows 7. My main pc that has numerous programs installed doe not have this issue. My laptop has this issue. My small pc that has a clean install with very few programs has this issue, also does not have any adobe products installed. On the PC's with the issue, if I do a refresh in firefox the issue is fixed for about 5-10 min and then comes back.

If this were a CSS issue why would refreshing firefox temporarily fix and then later come back?

This leads me to think that some background plugin or setting is getting fetched after a refresh.

Could this be some other application on windows causing this?

Can someone tell me if they can reproduce this issue and also how to fix this and what is causing it?

Here is my CSS

SELECT {
    color: #555558;
    font-size: 16px;
    margin: 0px 0px 8px 12px;
    padding: 2px 0px 2px 5px;
    width: 203px;
}

html

<select>
<option> - Select a Page - </option>
<option>Home Page</option>
<option>About Us</option>
<option>Camping Tips</option>
</select>

I posted several months ago regarding this issue however now the issue is not related to the version of firefox or CSS so the answers provided are misguided. Did Firefox 48 remove ability to style the select element?

Here is a list of plugins, as stated above, default installation produces this issue.

Answer 1

I know this is an old thread but the behavior still exists (FF 100 on OSX).

Look at this pagination bar:

Note also the larger height of the div with the select in it :-(

What I have done to resolve this: set a border on the select and set the background color to white.

select {
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: white;
    padding: 0px;
}

Now it looks like this:

Looks the same in Chrome.

Answer 2

Please try this code

/* 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;
  }
}

Thanks

Answer 3

Ok, so the solution here is to disable -> Multiprocess Windows

type about:config in the browser

then search for browser.tabs.remote.autostart (mine had a browser.tabs.remote.autostart.2)

change this to FALSE then restart the browser this will make firefox run Multiprocess Windows disabled which fixes the issue

Answer 4

This appears to be a bug that appeared since the release of multi-process Firefox. More info about Electrolysis here: https://wiki.mozilla.org/Electrolysis

If you're using Firefox 48 or later, you might be using e10s already. Check about:support and look for a number higher than 0 in the "Multiprocess Windows" entry.

Chances are: the computers affected are due to Multiprocess being enabled. This issue is being tracked on Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=910022

The issue should resolve itself with the release of Firefox 54.

Answer 5

test code :

-webkit-appearance: none;  /* Remove style Chrome */
-moz-appearance: none; /* Remove style FireFox */
appearance: none; /* Remove style FireFox*/