设置在Chrome中选择的渐变背景

我想样式选择，它几乎完美的作品，但在谷歌浏览器behvior是不同的，我修复了与-webkit-appearance: none;但这删除也选择箭头。我尝试为我的选择设置一个箭头，但它在Chrome中不可见，因为我使用了多个背景。我该怎么做才能在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/

来源

2012-02-16 BurebistaRuler

交换了背景的顺序，使 “箭” 的背景是在上面。

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;

来源

2012-02-16 13:33:55 thirtydot

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

来源

2013-07-18 13:20:32 Akki619

设置在Chrome中选择的渐变背景

回答

相关问题