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

时间:2010-11-10 08:45:59

标签: css select google-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中正常使用。

1 个答案:

答案 0 :(得分:52)

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可以应用的特定行为。