HTML CSS更改選擇箭頭的顏色

Question

我正在將選擇箭頭的顏色更改爲藍色。

有沒有簡單的方法來做到這一點？

Answer 1

.select_box{ 
 
    width: 200px; 
 
    overflow: hidden; 
 
    border: 1px solid #000; 
 
    position: relative; 
 
    padding: 10px 0; 
 
} 
 
.select_box:after{ 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 6px solid transparent; 
 
    border-right: 6px solid transparent; 
 
    border-top: 6px solid #f00; 
 
    position: absolute; 
 
    top: 40%; 
 
    right: 5px; 
 
    content: ""; 
 
    z-index: 98; 
 
} 
 
.select_box select{ 
 
    width: 220px; 
 
    border: 0; 
 
    position: relative; 
 
    z-index: 99; 
 
    background: none; 
 
}

<div class="select_box"> 
 
<select> 
 
    <option>Test This Select</option> 
 
    <option>Test This Select</option> 
 
</select> 
 
</div>

Answer 2

試試這個代碼段，

<div class="customerStyle"> 
    <select class="selectCustomer"> 
     <option value="Jone">Jone</option> 
     <option value="Tom">Tom</option> 
    </select> 
</div> 


.customerStyle select { 
    background: transparent; 
    width: 170px; 
    padding: 5px; 
    border: 0; 
    border-radius: 0; 
    height: 35px; 
} 

.customerStyle { 
    background: url("images/arrow.png") no-repeat right #ffffff; 
    border: 1px solid #000; 
    width: 150px; 
    height: 35px; 
    overflow: hidden; 
} 

添加藍色箭頭圖像 「圖像/ arrow.png」