CSS - changing the font color for a from select option in firefox

Question

I'm building a website for my church, and I'm teaching myself all about web design along the way.

http://www.wilmingtonchurchofgod.org/contact_us.html is the link where you can see my issue.

If you look at that page in firefox, and you click the select part of the form (next to, "Who would you like to contact?") you will see that when you hover over a choice, the font is white. I have tried various things to fix this, but can't find a solution. This seems to be specific to Firefox.

Here is the relevant CSS.

input, textarea, select, option{  
padding: 6px; 
border: solid 1px #E5E5E5;  
outline: 0;  
font: normal 13px/100% Verdana, Tahoma, sans-serif;  
width: 200px;  
background: #FFFFFF url(images/from-grad.jpg) left top repeat-x;  
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%,     #EEEEEE), to(#FFFFFF));  
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);  
box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px;  
-moz-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px;  
-webkit-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px;  
}

option{
    padding:0px;
}

textarea {  
    width: 400px;  
    max-width: 400px;  
    height: 150px;  
    line-height: 150%;  
}  

input:hover, textarea:hover, 
input:focus, textarea:focus{  
    border-color: #C9C9C9;  
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px;
} 

option:hover, option:focus, 
select:hover, select:focus {

color: black; border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px; }

Another side note is that I can't get any background gradient at all to show up on Google Chome (yet it does on Safari and they are supposed to use the same kit?)

Any help with these two things would be greatly appreciated.

Answer 1

I've traced it to the "-moz-linear-gradient" declaration on your select box. With it, it does as you've described. Without it, it's fine.

The level of customization you're trying to achieve on the select box is (admirable, but) a long shot. To keep this looking right in every browser, you'd have to use some sort of html/css/javascript list to override your select box. Not worth the trouble if you ask me.

Answer 2

Add this to your CSS to clear up the white-font issue:

input:hover, textarea:hover, select:hover, option:hover {
    background:white;
}