CODEWITHSUNDEEP
htmlcssgoogle-chromeselect
BurebistaRuler
BurebistaRuler

Reputation: 6509

Set gradient background for select in chrome

I want to style a select and it works almost perfectly but on google chrome behvior is different and I fixed that with -webkit-appearance: none; but this delete also select arrow. I try to set an arrow for my select but it is not visible in chrome because I use multiple backgrounds. What can I do to set that arrow on chrome.

select{
width:120px;
margin:10px;
background:url(http://s14.postimage.org/jls6v1ywt/select_background.png),
           url(http://s13.postimage.org/edsg65ss3/select_arrow.jpg);
background-position: center center,100% 53%;        
background-repeat: repeat-x, no-repeat;
border:1px solid #DDDBD7;
-webkit-appearance: none;
}

check my example:

http://jsfiddle.net/DCjYA/359/

Upvotes: 3

Views: 3364

Answers (2)

Akki619
Akki619

Reputation: 2432

select {
padding:9px;
margin: 0;
border-radius:4px;
-webkit-box-shadow: 
    0 0px 0 #ccc,
    0 0px #fff inset;
background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);
background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
color:black;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none; 
cursor:pointer;
border: 1px solid #ccc;

}

This piece of code will fix your problem. Just change the padding and use local images or color codes a/c to your need. or use this to generate the code for you.

See: JS fiddle for background gradient and down arrow

Upvotes: 1

thirtydot
thirtydot

Reputation: 228152

Swap the order of the backgrounds, so that the "arrow" background is on top.

http://dev.w3.org/csswg/css3-background/#layering

The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on. The background color, if present, is painted below all of the other layers.

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

background: url(http://s13.postimage.org/edsg65ss3/select_arrow.jpg), url(http://s14.postimage.org/jls6v1ywt/select_background.png);
background-position: 100% 53%, center center;        
background-repeat: no-repeat, repeat-x;

Upvotes: 4

Related Questions