Add gradient to select CSS3 window in chrome?

Question

I am trying to make a gradient background for some form elements. Although it works great for text and text areas, it doesn't seem to work for choice in Chrome / Safari (although it works on FF3). Is there any way to do 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 if they are both set wide: 400 pixels, the selection is noticeably shorter in both Chrome and Firefox. Why is this?

Answer 1

im not quite sure you can style so much in any browser. They have always been a pain for css.

In that the parameters will not expand to the width of the text, in firefox they are shorter because of the drop-down list icon, etc. Its just painful to use css for them. If you should have your chosen style, you can look at the jquery user interface, as I believe that they have separate stylish squares.

Answer 2

Actually, you can do it in Chrome with background images, for example, http://s3.amazonaws.com/37assets/svn/480-custom_forms.html . My biggest problem so far is finding a version that also works for Firefox, but if this is not a requirement for you, be sure to check this site and use the background image method.

Answer 3

check out my example and see how you can set the gradient background to select on chrome.

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

Answer 4

For mcmwhfy, the answer above does not solve the problem with pure CSS, but is the only SELECT solution in Chrome.

The following will be in the input style / textarea / select in each browser, if possible, with the exception of SELECT in Chrome. But unfortunately, images are the only way to do it now in Chrome.

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