RESOLVED CONFIGURATION CHANGED 33622
<SELECT> doesn't properly render with -webkit-gradient 
https://bugs.webkit.org/show_bug.cgi?id=33622
Summary <SELECT> doesn't properly render with -webkit-gradient
Lindsey Simon
Reported 2010-01-13 13:49:32 PST
Created attachment 46499 [details] testcase with gradient on a select Both of these notes refer to a <SELECT> with -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ddd)), testcase file attached. * In Webkit nightly on a Mac, the background renders simply as solid gray and the 3d look falls off the cliff. * In Linux Chromium unstable the background colors are quite off, rendering black at the top of the select and grey at the bottom. (On Windows chromium, the background looks correct)
Attachments
testcase with gradient on a select (1.17 KB, text/html)
2010-01-13 13:49 PST, Lindsey Simon 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
infoeon
Comment 1 2011-08-16 18:49:15 PDT
Below is a test case. <!DOCTYPE HTML> <html> <head> <style> body{ background-color: yellow; } * { border-color: green; color: blue; } select, input{ background-color: red; background-image: repeating-linear-gradient(45deg, grey, grey 3px, orange 3px, orange 6px); background-image: -moz-repeating-linear-gradient(45deg, grey, grey 3px, orange 3px, orange 6px) !important; background-image: -webkit-repeating-linear-gradient(45deg, grey, grey 3px, orange 3px, orange 6px) !important; } </style> <title>Test CSS</title> </head> <body> <select name="test1"> <option selected>I should have a cool gradient.</option> <option>Banana Gum</option> </select> <input type="text" name="test2" value="123"> </body> </html>
gur.trio
Comment 2 2013-12-20 04:05:53 PST
(In reply to comment #1) > Below is a test case. > > > > <!DOCTYPE HTML> > <html> > <head> > <style> > body{ > background-color: yellow; > } > > * { > border-color: green; > color: blue; > } > > select, input{ > background-color: red; > > background-image: repeating-linear-gradient(45deg, grey, grey 3px, orange 3px, orange 6px); > background-image: -moz-repeating-linear-gradient(45deg, grey, grey 3px, orange 3px, orange 6px) !important; > background-image: -webkit-repeating-linear-gradient(45deg, grey, grey 3px, orange 3px, orange 6px) !important; > } > </style> > <title>Test CSS</title> > </head> > <body> > <select name="test1"> > <option selected>I should have a cool gradient.</option> > <option>Banana Gum</option> > </select> > <input type="text" name="test2" value="123"> > </body> > </html> Working fine on chrome Version 31.0.1650.63 and webkit revision 160903. Please confirm so that we can close this issue.
Ahmad Saleem
Comment 3 2022-09-17 03:30:00 PDT
I took attached test and changed to JSFiddle and removed -webkit- and it works same across all browsers (Safari Technology Preview 153, Firefox Nightly 106 and Chrome Canary 107): Link - https://jsfiddle.net/o4fgv7tu/show Further, I took testcase from Comment 01 and changed also into JSFiddle (also removed prefixed lines): Link - https://jsfiddle.net/10ech2wa/show Same result, all browser same. I am marking this as "RESOLVED CONFIGURATION CHANGED". Please reopen if it is reproducible with updated test case. Thanks!
Note You need to log in before you can comment on or make changes to this bug.