Firefox overriding style of html select option

user_873248 0
Viewed 12832

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

firefox select option styled

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

firefox select option style overriden

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. enter image description here

firefox css html
5 Answers

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

user_40340880

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

Look at this pagination bar: unstyled select box

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: styled select box

Looks the same in Chrome.

user_13435530
Related