Add gradient to select box w/ CSS3 in chrome?

Question

I'm try to render a gradient background on some form elements. While it works fine for text and text areas, the same does not seem to work for selects in Chrome/Safari (though it does work on FF3) . Is there a way to accomplish this?

CSS code:

        .prettyform input, .prettyform textarea, .prettyform select {
            padding: 9px;
            border: 1px solid #E2E3E5;
            outline: 0;
            width: 400px;
            box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
            -moz-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
            -webkit-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
            background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #E2E3E5), to(#FFFFFF));  
            background: -moz-linear-gradient(top, #FFFFFF, #E2E3E5 1px, #FFFFFF 25px);
        }

HTML Markup:

    <form class='prettyform'>
        <p>
        <label>Text Input</label> <br>
        <input type='text' name='test1'>
        </p>
        <p>
        <label>Select Input</label> <br>
        <select name='test2'>
            <option value='1'>Option 1</option>
            <option value='2'>Option 2</option>
            <option value='3'>Option 3</option>
        </select>
    </form>

Live Demo

Another thing I noticed is that even though they are both set to width: 400px, the select is noticeably shorter in both Chrome & Firefox. Why is this?

Answer 1

check my example and see how you can set gradient background for select on chrome.

http://jsfiddle.net/thirtydot/DCjYA/361/

Answer 2

im not entirely sure if you can style selects that much in any browser. They have always been a pain for css.

In ie, options wont expand to the width of the text, in firefox, they are shorter because of the dropdown icon etc. Its just a pain to use css for them. If you must have a styled select box, you can look at jquery UI as i believe they have some stylable select boxes

Answer 3

Actually, you can do it in Chrome with background images, see http://s3.amazonaws.com/37assets/svn/480-custom_forms.html for an example. My biggest problem so far is finding a version that also works for Firefox, but if that's not a requirement for you, by all means check that site out and make use of the background image method.

Answer 4

For the record, mcmwhfy's answer above does not solve the issue with pure CSS, but is the only solution for SELECTs in Chrome.

The following will style input/textarea/select in every browser where possible, except for SELECTs in Chrome. But unfortunately, images are the only way to do it in Chrome right now.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8ff', endColorstr='#ffffff',GradientType=0 ); /* IE8/9 */
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F4F8FF 100%); /* IE10+ */
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(102,204,255,0.75), rgba(0,0,0,0));
background: -webkit-gradient(linear, left top, left 20, from(#FFFFFF), color-stop(4%, #f4f8ff), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #f4f8ff 1px, #FFFFFF 25px);