CSS 如何使选择元素在 Chrome 中透明？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4142619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Make Select Element be Transparent in Chrome?
提问by Jeaf Gilbert
Please look this example:
请看这个例子：
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/
https://jsfiddle.net/jeafgilbert/wz0zaev0/
Can someone please update it to be transparent in Chrome? Currently the result in FF is the correct one. Thanks.
有人可以将其更新为在 Chrome 中透明吗？目前 FF 中的结果是正确的。谢谢。
Update:
更新：
Now without -webkit-appearance: none;works fine in Chrome.
现在没有-webkit-appearance: none;在 Chrome 中工作正常。
回答by MatTheCat
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>Not tested on firefox but it seems -webkit-appearance: none;disables specific behaviours webkit can apply.
未在 Firefox 上测试，但似乎-webkit-appearance: none;禁用了 webkit 可以应用的特定行为。
