html - 防止 my::after 阻止我的选择

Question

这是一个演示我的问题的 fiddle :JSFiddle

我正在制作自定义下拉菜单(实际上我使用的是 icomoon 图标而不是 V)...它看起来不错，但是父元素的 ::after 是阻止选择:(

<div class="select-style">
  <select>
    <option value="">...</option>
    <option value="1365">Some term</option>";
  </select>
</div>

CSS

.select-style {
  width: 240px;
  height: 26px;
  border: 0;
  padding: 0;
  margin: 0;
  position: relative;
  &::after {
    /*content: "\f107";
        font-family: "icomoon";*/
    content: "V";
    font-size: 18px;
    position: absolute;
    right: 7px;
    top: 0;
  }
}

select {
  width: 100%;
  height: 24px;
  border: 1px solid rgb(199, 199, 199);
  border-radius: 3px;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
  &::-ms-expand {
    display: none;
  }
}

我研究过让 JS 打开下拉菜单，但发现这不起作用。我什至尝试使用 z-index 来查看是否有帮助...但由于某种原因，即使选择具有透明背景，图标也会被隐藏。

我怎样才能让自定义图标在选择上可见，但不会阻止我的选择被点击？

Answer 1

将 position:relative 和 z-index:1 添加到 select 本身

https://jsfiddle.net/hbpqvkqL/

select {
  ...
  position: relative;
  z-index: 1;
}