为 chrome 中的选择设置渐变背景答案

【问题标题】：Set gradient background for select in chrome为 chrome 中的选择设置渐变背景
【发布时间】：2012-03-07 21:14:49
【问题描述】：

我想设置一个选择的样式，它几乎可以完美地工作，但在谷歌浏览器上的行为是不同的，我用-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/

【问题讨论】：

标签： html css google-chrome select

【解决方案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;

【讨论】：

【解决方案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

【讨论】：