CODEWITHSUNDEEP
css
Daniel
Daniel

Reputation: 2500

Gradient style for <select> tag?

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.

See the image below

Upvotes: 7

Views: 18668

Answers (3)

andyb
andyb

Reputation: 43823

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.

Upvotes: 13

Adam Stacey
Adam Stacey

Reputation: 2831

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.

Upvotes: 2

Lucas
Lucas

Reputation: 3715

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;
    }

Upvotes: 1

Related Questions