请看这个例子:
select {
width: 172px;
height: 22px;
padding: 2px 7px;
border: none;
background: url(http://imgur.com/MJyZM.png) 0 0 no-repeat;
}
<select>
<option value="abcdefg">abcdefg</option>
<option value="1234567">1234567</option>
<option value="abcdefg">abcdefg</option>
</select>
https://jsfiddle.net/jeafgilbert/wz0zaev0/
有人可以将它更新为在 Chrome 中透明吗?目前 FF 中的结果是正确的。谢谢。
更新:
现在没有 -webkit-appearance: none;
在 Chrome 中工作正常。
最佳答案
select {
width:192px;
padding:2px;
border:none;
background:url(http://imgur.com/MJyZM.png) 0 0 no-repeat;
-webkit-appearance: none;
}
<select>
<option value="abcdefg">abcdefg</option>
<option value="1234567">1234567</option>
<option value="abcdefg">abcdefg</option>
</select>
未在 firefox 上测试,但似乎 -webkit-appearance: none;
禁用了 webkit 可以应用的特定行为。
关于css - 如何在 Chrome 中使选择元素透明?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4142619/