は、後にここに私の選択

Question

を遮断するから、私の::防ぐ私の問題を実証フィドルです：JSFiddle

私はカスタムが（実際に私が代わりにVのicomoonアイコンを使用しています）ドロップダウン作っています。.. 。それは良さそうに見えますが、親要素の::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ドロップダウンを開いたに見えたが、Oを見つけましたutは動作しません。私はz-indexを使って試してみましたが、それが役立つかどうかを見ていますが、選択に透明な背景があっても何らかの理由でアイコンが隠れてしまいます。

カスタムアイコンが選択範囲に表示されますが、選択範囲はクリックされないようにするにはどうすればよいですか？

Answer 1

yopuを設定することができます::後のzインデックス持つこと自体を選択

https://jsfiddle.net/hbpqvkqL/

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

Answer 2

にposition:relativeとz-index:1を追加：-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; 
} 
}