クロムで選択するためのグラデーションの背景を設定します

Question

私は選択をスタイルしたいと思っていますが、ほぼ完璧に動作しますが、google chrome behaviorでは違うので、-webkit-appearance: none;で修正しました。 私は選択のために矢印を設定しようとしますが、複数の背景を使用しているため、クロムには表示されません。クロムにその矢印を設定するにはどうしたらいいですか？

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; 

}

コードのこの作品は、あなたの問題を解決します。パディングを変更して、ローカルイメージやカラーコードを必要に応じて使用してください。 thisを使用してコードを生成してください。

参照：JS fiddle for background gradient and down arrow