自定義下拉箭頭單擊問題

Question

我想用字體真棒圖標替換默認的選擇框箭頭。它的樣式是我想要的，但是當我點擊自定義箭頭時，下拉菜單不會打開。如果我點擊選擇框上的其他地方，事情就會正常工作。我已將選擇框的z索引設置爲高於箭頭的z索引。不知道問題是什麼。

body { 
 
    padding: 30px; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    width: 300px; 
 
} 
 
.dropdown select { 
 
    outline: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: none; 
 
    border-radius: 0; 
 
    box-shadow: none; 
 
    background: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
      appearance: none; 
 
    border-bottom: 1px solid; 
 
    padding: 0 6px 0 6px; 
 
    cursor: pointer; 
 
    width: 100%; 
 
    z-index: 2; 
 
} 
 
.dropdown select:hover { 
 
    border-color: rgba(221, 221, 221, 0.5); 
 
    background: rgba(221, 221, 221, 0.5); 
 
} 
 
.dropdown::after { 
 
    position: absolute; 
 
    font-family: "FontAwesome"; 
 
    color: black; 
 
    content: "\f107"; 
 
    bottom: 1px; 
 
    right: 4px; 
 
} 
 
.dropdown:hover::after { 
 
    color: gray; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="dropdown"> 
 
    <select id="exampleSelect1"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    </select> 
 
</div>

Answer 1

您可以設置箭頭爲負的z-index這使得它無法點擊。意思是，選擇將會是。

.dropdown::after{ 
    z-index: -1; 
} 

---

您設置了.dropdown select沒有做任何事情，因爲元素仍然是position: static;的Z-index。將它設置爲相對，然後確保它比箭頭高。

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

Answer 2

它添加到CSS樣式爲您:after：

pointer-events: none; 

所以，你應該有這樣的事情：

.dropdown::after { 
    position: absolute; 
    font-family: "FontAwesome"; 
    color: black; 
    content: "\f107"; 
    bottom: 1px; 
    right: 4px; 
    pointer-events: none; 
}