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](http://dl.dropbox.com/u/5821809/styledemo.html)

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?