HTML，CSS，下拉箭頭，選擇

Question

我在這里創建了小提琴，其中顯示了選擇和下拉箭頭。

我的問題是箭頭是使用CSS創建的，並位於select的頂部。 但是，單擊箭頭不會打開下拉菜單。

1. 有沒有一種方法可以像使用圖像箭頭一樣使用css作為select的背景。
2. 還是可以模擬單擊箭頭時的行為？

 .selectClass { -webkit-appearance: none; -webkit-border-radius: 0; -moz-appearance: none; border: none; width: 100px; background: #EEE; height: 30px; font-size: 20px; padding-left: 5px; } .dropDownArrow { position: relative; margin-left: 75px; margin-top: -20px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #555; } 

 <select class="selectClass"> <option>One</option> <option>Two</option> <option>Three</option> </select> <div class="dropDownArrow"></div> 

Answer 1

我將使用背景顏色圍繞兩個元素創建一個父div，將下拉箭頭移動到選擇標題的后面，使該標題背景透明。 這樣，您將看到箭頭，但是只單擊頂部的選擇元素框：

 .dropDownArrow { position: absolute; left: 75px; top: 10px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #555; } .selectClass { -webkit-appearance: none; -webkit-border-radius: 0; -moz-appearance: none; border: none; width: 100px; background: transparent; height: 30px; font-size: 20px; padding-left: 5px; position: absolute; } .dropdownWrapper { position:absolute; width: 100px; height: 30px; background: #ddd; } 

 <div class="dropdownWrapper"> <div class="dropDownArrow"></div> <select class="selectClass"> <option>One</option> <option>Two</option> <option>Three</option> </select> </div> 

Answer 2

到目前為止，這里最簡單的解決方案是忽略鼠標在箭頭上的點擊，並通過使用pointer-events: none;讓點擊“通過” pointer-events: none; 。 這是對代碼的唯一需要的更改，請在此處查看：

 .selectClass { -webkit-appearance: none; -webkit-border-radius: 0; -moz-appearance: none; border: none; width: 100px; background: #EEE; height: 30px; font-size: 20px; padding-left: 5px; } .dropDownArrow { pointer-events: none; position: relative; margin-left: 75px; margin-top: -20px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #555; } 

 <select class="selectClass"> <option>One</option> <option>Two</option> <option>Three</option> </select> <div class="dropDownArrow"></div>