Gradient style for <select> tag? - css

Question

I'm trying to create a form where the background of the input fields are styled with a gradient background. It succeds for all <input> tags, but not for the <select> tag. Can this be done? Am I doing something wrong?
The CSS I'm using:
form#contact input[type="text"], input[type="url"],
input[type="email"], input[type="tel"], textarea, select {
margin: 3px 0 0 0;
padding: 6px;
width: 260px;
font-family: arial, sans-serif;
font-size: 12px;
border: 1px solid #ccc;
background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px);
}
See the image below.

Answer 1

Styling <select> is difficult since browsers try and render the control to match the OS. You could add -webkit-appearance: none; to enable the gradient but that will also remove the arrow.
See Add gradient to select box w/ CSS3 in chrome? and Background Image for Select (dropdown) does not work in Chrome
Or if you can use jQuery or Prototype, I highly recommend the excellent Chosen plugin in which the <select> is replaced by a dropdown that can be styled.
Edit: I have to add the styling form elements is sometimes frowned upon. Eric Meyer's article on the subject is good background reading.

Answer 2

You may have a problem with this due to the operating system and Internet Browser you are using.
One easy way of getting round this is by using a JQuery library called Uniform. It allows you to style form elements how you want and is cross-browser compatible.
You can find more information on this here: http://uniformjs.com/.
I hope that helps.

Answer 3

Have you tried to debug that in firebug?
How about making the backgrounds important?
form#contact input[type="text"], input[type="url"],
input[type="email"], input[type="tel"], textarea, select {
margin: 3px 0 0 0;
padding: 6px;
width: 260px;
font-family: arial, sans-serif;
font-size: 12px;
border: 1px solid #ccc;
background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF)) !important;
background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px) !important;
}