防止擋住了我的選擇

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可以設置::後具有的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; 
} 
}