html - 在 chrome 中为选择设置渐变背景

Question

我想设置一个选择的样式，它几乎完美地工作，但在 google chrome 上 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

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.

参见: 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;