0

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

2 回答 2

3

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

演示

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。

于 2012-08-21T11:57:03.167 回答
0 
appearance: none;
-webkit-appearance: none;
-moz-appearance:none;
-o-appearance: none;

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

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

于 2013-09-03T08:37:26.183 回答