Css – Firefox CSS select OPTION styling


From what im seeing, you cannot style boxes, because it is OS specific and cannot be broken unless you edit with javascript…

My example is here:


I just restyled the page today. HUGE improvement from where it was before.

Looks perfect in Chrome and Safari…Firefox gives me issues.

  1. In Firefox, the text isnt centered.
  2. I cant use -moz-appearance:none; to get rid of the box in the right.
  3. The items turn up white due to my CSS for chrome and safari. This is only for the SELECT text, but the still stay black in my preferred browsers. In Firefox, it turns the white…

What can i do to change this…?

font-family:Verdana, Geneva, sans-serif;
-webkit-appearance: none;
-moz-appearance: none;

<form method="post" action="newSearch.asp">
<select class="select" name="baseID" >  

<% do while not BaseRs.eof %>
<option value="<%=baseRs("baseID")%>"><%=baseRs("base")%></option>
loop %>                                         
</select> <br><br>
<input type="hidden" name="CategoryID" value="<%=sqlFilter(request("categoryID"))%>">
<div style="position:relative; top:14px; left: 264px;"><input type="submit"     value="Continue >>>"></div>

Is there any way I can edit Mozilla to get the OPTION text white, and hide the SELECT appearance and center text…?

Or am I screwed because of how each OS runs?

I run a MAC in the office, PC at home, so Ive yet to see my site on a pc with these new changes ive made today.

Best Solution

Javascript-based replacements for the SELECT/OPTION are much more reliable and flexible, especially if you want consistency across browsers. You'll find there are things you just can't do using native styling and tags.