请看这个例子:
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可以应用的特定行为。