33622 2010-01-13 13:49:32 -0800 <SELECT> doesn't properly render with -webkit-gradient 2022-09-17 03:30:00 -0700 1 1 1 Unclassified WebKit New Bugs 528+ (Nightly build) All All RESOLVED CONFIGURATION CHANGED P2 Normal --- 0 lsimon webkit-unassigned ahmad.saleem792 gur.trio infoeon priyajeet.hora simon.fraser oldest_to_newest 180387 0 46499 lsimon 2010-01-13 13:49:32 -0800 Created attachment 46499 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) 452065 1 infoeon 2011-08-16 18:49:15 -0700 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> 961821 2 gur.trio 2013-12-20 04:05:53 -0800 (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. 1899187 3 ahmad.saleem792 2022-09-17 03:30:00 -0700 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! 46499 2010-01-13 13:49:32 -0800 2010-01-13 13:49:32 -0800 testcase with gradient on a select select-gradient-bg.html text/html 1200 lsimon PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgaHR0cC1lcXVpdj0iY29u dGVudC10eXBlIiBjb250ZW50PSJ0ZXh0L2h0bWw7IGNoYXJzZXQ9dXRmLTgiIC8+CiAgICA8dGl0 bGU+TmF0aXZlIGNvbnRyb2xzL2J1dHRvbnM8L3RpdGxlPgoKICAgIDxzdHlsZT4KICAgIGJvZHkg ewogICAgICBmb250OiAxM3B4LzEzcHggQXJpYWwsIHNhbnMtc2VyaWY7CiAgICB9CiAgICBmaWVs ZHNldCB7CiAgICAgIHBhZGRpbmc6IDIwcHg7CiAgICAgIGJvcmRlcjogMXB4IHNvbGlkICMyMjI7 CiAgICAgIG1hcmdpbi1ib3R0b206IDE1cHg7CiAgICB9CgoKICAgIC5hdWdtZW50ZWQgewogICAg ICBiYWNrZ3JvdW5kOiAtd2Via2l0LWdyYWRpZW50KGxpbmVhciwgMCAwLCAwIGJvdHRvbSwKICAg ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBmcm9tKCNmZmYpLCB0bygjZGRkKSk7CiAg ICB9CiAgICA8L3N0eWxlPgoKICAgIDxmaWVsZHNldD4KICAgICAgPGxlZ2VuZD5TRUxFQ1Qgbm9y bWFsPC9sZWdlbmQ+CiAgICAgIDxzZWxlY3Q+CiAgICAgICAgIDxvcHRpb24+MTExMTwvb3B0aW9u PgogICAgICAgICA8b3B0aW9uPjExMTE8L29wdGlvbj4KICAgICAgICAgPG9wdGlvbj4xMTExPC9v cHRpb24+CiAgICAgICAgIDxvcHRpb24+MTExMTwvb3B0aW9uPgogICAgICAgICA8b3B0aW9uPjEx MTE8L29wdGlvbj4KICAgICAgPC9zZWxlY3Q+CiAgICA8L2ZpZWxkc2V0PgoKICAgIDxmaWVsZHNl dD4KICAgICAgPGxlZ2VuZD5TRUxFQ1Qgdy8gZ3JhZGllbnQgYmFja2dyb3VuZDwvbGVnZW5kPgog ICAgICA8c2VsZWN0IGNsYXNzPSJhdWdtZW50ZWQiPgogICAgICAgICA8b3B0aW9uPjExMTE8L29w dGlvbj4KICAgICAgICAgPG9wdGlvbj4xMTExPC9vcHRpb24+CiAgICAgICAgIDxvcHRpb24+MTEx MTwvb3B0aW9uPgogICAgICAgICA8b3B0aW9uPjExMTE8L29wdGlvbj4KICAgICAgICAgPG9wdGlv bj4xMTExPC9vcHRpb24+CiAgICAgIDwvc2VsZWN0PgogICAgPC9maWVsZHNldD4KCiAgICA8Zmll bGRzZXQ+CiAgICAgIDxsZWdlbmQ+RElWIHdpdGggdGhlIHNhbWUgQ1NTPC9sZWdlbmQ+CiAgICAg IDxkaXYgc3R5bGU9IndpZHRoOiA4MHB4OyBoZWlnaHQ6IDIwcHg7IGJvcmRlcjoxcHggc29saWQg I2NjYzsiCiAgICAgICAgY2xhc3M9ImF1Z21lbnRlZCI+PC9kaXY+CgoKICA8L2JvZHk+CjwvaHRt bD4K