自定义选择下拉箭头无法点击

Question

我将使用以下代码自定义我的下拉选择箭头：

HTML：

<span class="selectWrapper">
    <select id="rowselect" class="pageinfoselect input-mini">
        <option>...</option>
    </select>
</span>

CSS：

span.selectWrapper {
    position: relative;
    display: inline-block;
          width:65px;
}

span.selectWrapper select {
    display: inline-block;
    padding: 4px 3px 3px 5px;
    margin: 0;
    font: inherit;
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #f5f5f5;
    height:30px;
    color:#666666;
    border:1px solid #dddddd;
}




/* Select arrow styling */
span.selectWrapper:after {
    content: url("../images/arrow_down.png");
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    line-height: 30px;
    padding: 0 7px;
    background: #f5f5f5;
    color: white;
    border:1px solid #dddddd;
    border-left:0px;
}

这个效果很好，可以替换默认的下拉箭头，但问题是箭头图片无法点击。当我点击选择框时，它会打开，但我也希望在点击箭头图像时也能打开。

- Or Weinberger

Answer 1

添加以下规则

pointer-events:none;

编辑：

需要注意的是，虽然按照caniuse网站上的信息，IE浏览器会在IE11版本中支持该属性，但现在还不支持。

但是，如果您仍然想使用这种方法，您可以使用Modernizer或条件注释（对于IE < 10），以及这个CSS hack（针对IE10）使IE恢复到标准内置箭头。

/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) { 
    span.selectWrapper:after
    {
        display:none;
    }
}

不过，对于这个问题有一个变通方法（以及另一个不同的解决方案），我在这里的回答中提到了它-该回答还包含这个Codepen

- Danield

---

我应该把这个添加到哪里？ - Or Weinberger

到 span.selectWrapper:after 类。 - Danield

下次加上 jsfiddle 的示例，这样两个人都可以看到。 - Rafael

我在这里的回答中写到了这个问题：https://dev59.com/YXI-5IYBdhLWcg3wW3Cp#13968900 ... @Rafael - 在那个回答中，我添加了这个fiddle。 - Danield

不得不等待最短时间才能回答，但我刚刚注意到这在IE（10）上不起作用，有什么想法？ - Or Weinberger

@hoverhand 我更新了我的答案...我建议你也阅读一下我的答案，我在编辑中附上了链接(其中展示了两种制作自定义选择元素的方法)。 - Danield