如何使选择元素在Chrome中透明？ [英] How to Make Select Element be Transparent in Chrome?

问题描述

请看这个例子：

<select>
    <option value="abcdefg">abcdefg</option>
    <option value="1234567">1234567</option>
    <option value="abcdefg">abcdefg</option>
</select>

select {
    width:172px;
    height:22px;
    padding:2px 7px;
    border:none;
    background:url(http://imgur.com/MJyZM.png) 0 0 no-repeat;
}

https://jsfiddle.net/jeafgilbert/wz0zaev0/

有人可以在Chrome中将其更新为透明吗？目前FF中的结果是正确的。非常感谢。

Can someone please update it to be transparent in Chrome? Currently the result in FF is the correct one. Thanks.

更新：

推荐答案

<select>
    <option value="abcdefg">abcdefg</option>
    <option value="1234567">1234567</option>
    <option value="abcdefg">abcdefg</option>
</select>

select {
    width:192px;
    padding:2px;
    border:none;
    background:url(http://imgur.com/MJyZM.png) 0 0 no-repeat;
    -webkit-appearance: none;
}

未在firefox上测试，但似乎 -webkit-外观：无; 禁用webkit可以应用的特定行为。

Not tested on firefox but it seems -webkit-appearance: none; disables specific behaviours webkit can apply.

这篇关于如何使选择元素在Chrome中透明？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！