override firefox forms.css

i have a problem styling html <select> element.

After开发者_StackOverflow社区 work around, i found the problem that firefox always overrride css with forms.css in every page load.

my question is how to override firefox default css in my page ?

forms.css, I am assuming this is your style sheet.

I am also guessing that this has some very specific styles that are more specific than select{}

Use firebug to determine what styles are being applied and where they are coming from, will at least show you if your style is being overridden.

Try defining a pseudo class for the element like

select.my_select1 { font-size: 8px; }

Then apply the pseudo class the element with

<select class="my_select1">

Looking at a web app that I'm building now that displays perfectly in all current major browsers, I have assigned pseudo classes to each of these form elements and have no problem.

I hope this helps you

I recently had a similar problem. I made a custom style select but the option:checked was getting a style from the Firefox forms.css that I could not override.

My co-workers found two solutions:

1. -webkit-text-fill-color: myColor; // on the select

2. select:focus:-moz-focusring {color: myColor;} // on the select