为 Internet Explorer 和 Firefox 选择菜单箭头样式答案

【问题标题】：Select menu arrow style for Internet Explorer and Firefox为 Internet Explorer 和 Firefox 选择菜单箭头样式
【发布时间】：2012-08-16 18:08:11
【问题描述】：

这是用于选择列表的自定义箭头的样式，但它不适用于 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;
}

【问题讨论】：

标签： html internet-explorer firefox css select

【解决方案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。

【讨论】：

但是你不能点击ie中的箭头:(
我在回答中说过这种方法只适用于Firefox、Chrome和Safari。
然后我无法使用它。无论如何，谢谢

【解决方案2】：

appearance: none;
-webkit-appearance: none;
-moz-appearance:none;
-o-appearance: none;

您应该为所有浏览器使用整个代码...webkit 仅支持 chrome 和 safari...moz 用于 firefox...。

或者您可以在选择框上使用“pointer-events:none”作为 div，但这在 IE 中不起作用...

【讨论】：