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，您还可以覆盖选择的箭头，在覆盖箭头的元素上添加单击侦听器，并在单击箭头时打开选择。这实际上适用于任何浏览器，但它涉及JavaScript。

Answer 2

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

你应该使用所有浏览器的整个代码... webkit只支持chrome和safari ... moz适用于firefox ....

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

选择Internet Explorer和Firefox的菜单箭头样式

2 个答案: