如何使选择元素在 Chrome 中透明? [英] How to Make Select Element be Transparent in 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 中的结果是正确的.谢谢.

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

更新:

现在没有 -webkit-appearance: none; 在 Chrome 中工作正常.

Now without -webkit-appearance: none; works fine in 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 可以应用的特定行为.

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

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