html - 添加图标字体以供选择

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