設置在Chrome中選擇的漸變背景

Question

我想樣式選擇，它幾乎完美的作品，但在谷歌瀏覽器behvior是不同的，我修復了與-webkit-appearance: none;但這刪除也選擇箭頭。 我嘗試爲我的選擇設置一個箭頭，但它在Chrome中不可見，因爲我使用了多個背景。我該怎麼做才能在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; 
} 

檢查我的例子：

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

Answer 1

交換了背景的順序，使 「箭」 的背景是在上面。

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

該列表中的第一圖像是最接近用戶，下一個被塗在第一背後，等等的層。背景顏色（如果存在）被繪製在所有其他圖層下面。

參見：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; 

Answer 2

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; 

}

這段代碼將解決您的問題。只需更改填充並使用本地圖像或顏色代碼a/c即可滿足您的需要。或使用this爲您生成代碼。

參見：JS fiddle for background gradient and down arrow