如何使选择元素在Chrome中透明？

一尘不染

如何使选择元素在Chrome中透明？

css

请看这个例子：

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>

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

更新：

现在无法-webkit-appearance: none;在Chrome中正常运行。

阅读 277

2020-05-16

共1个答案

一尘不染

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

2020-05-16