添加图标字体以进行选择

Question

我在使用自定义字体图标选择时出现问题，请查看此屏幕截图的外观

问题在于我无法打开选项下拉单击该箭头，因为它在选择上，如果我添加z-index：-1箭头在选择下面，但我需要在该选择之上的箭头。

这是我目前的代码。

HTML

<li class="dropdown">
    <select name="font" id="font" placeholder="&#xe61d;">
        <option value="Arial">Arial</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Georgia">Georgia</option>
    </select>
</li>

CSS /萨斯

select {
    @include border(0px);
    padding: 7px 0;
    position: relative;
    top: -2px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
&.dropdown {
    &:after {
        content: "\e61d";
        font-family: 'icomoon';
        color: black;
        @include abs-pos(0, 0);
    }
}

Answer 1

我认为您遇到的问题是单击自定义箭头时select未点击的点击事件。

尝试将此样式添加到箭头中（我假设它是:after元素，因为我不熟悉SASS）

pointer-events: none;

这将允许您点击下面的元素，在本例中为select