html - 为 Internet Explorer 和 Firefox 选择菜单箭头样式

Question

这是用于为选择列表使用自定义箭头的样式，但它在 IE 和 Mozilla Firefox 中不起作用。是否有任何黑客/解决方案？

select{
    -webkit-appearance:none; -moz-appearance:none !important;
    border-radius:4px ; border:#cccccc solid 1px ;
    height:26px; width:210px; padding-left:8px;
    font:normal 14px Myriad Pro, Verdana, Geneva, sans-serif; color:#7f7f7f;
    background-image:url(../images/list_arrow.jpg); background-position:185px;  background-repeat:no-repeat;
}

Answer 1

我不知道用于 IE 的纯 CSS 解决方案，但是您可以为 Firefox 做的事情是用另一个元素覆盖 select 的箭头(只是箭头!)背景是您的自定义箭头，并在该元素上使用 pointer-events: none(这也适用于 Chrome 和 Safari)。

DEMO

HTML:

<select>
    <option>item 1</option>
    <option>item 2</option>
    <option>item 3</option>
</select>
<div class='arrow'></div>

CSS:

select, .arrow { display: inline-block; vertical-align: middle; }
option { padding: 0 1em; }
.arrow {
    width: 26px;
    height: 26px;
    margin-left: -28px;
    display: inline-block;
    background: url(arrow.png);
    background-size: 100% 100%;
    pointer-events: none;
}

---

对于IE，也可以覆盖select的箭头，在覆盖箭头的元素上添加点击监听器，当点击箭头时打开select。这实际上适用于任何浏览器，但它涉及 JavaScript。