自定义下拉箭头单击问题

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; 
}