Question

我想要选择一个选项并且它的工作方式几乎完美但是在谷歌Chrome浏览器上的行为是不同的，我用-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

在chrome中选择渐变背景

2 个答案: