Gradient style for <select> tag?

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.