css – 如何在Chrome中使选择元素变得透明?

前端之家收集整理的这篇文章主要介绍了css – 如何在Chrome中使选择元素变得透明?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
请看这个例子:
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>
    <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-appearance:none;禁用webkit可以应用的特定行为。

猜你在找的CSS相关文章