Question

这是一个演示我的问题的小提琴：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添加到选择本身

https://jsfiddle.net/hbpqvkqL/

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

Answer 2

yopu可以将:: after设置为z-index：-1;

.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;
z-index: -1;
 }
}

阻止my :: after阻止我的选择

2 个答案: