如何更改html選擇框的箭頭顏色？

Question

我想要樣式選擇引導元素，如下圖所示：

但不幸的是不能改變箭頭的顏色。

#test{ 
 
    border: 1px solid #dd6592; 
 
    border-radius: 0px; 
 
    text-align: center; 
 
    width:20%; 
 
    font-size: 16px; 
 
    margin-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<select class="form-control" id="test"> 
 
    <option>Test</option> 
 
    <option>Test</option> 
 
    <option>Test</option> 
 
</select>

Answer 1

無法在該箭頭跨瀏覽器上更改顏色。

這是一個解決方法，使用包裝和僞元素。

.myselect { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.myselect select { 
 
    height: 30px; 
 
    border-color: red; 
 
    padding-right: 10px; 
 
    outline: none; 
 
} 
 
.myselect::after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 4px; 
 
    top: 11px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 8px solid transparent; 
 
    border-right: 8px solid transparent; 
 
    border-top: 8px solid rgba(255,0,0,1); 
 
    pointer-events: none; 
 
}

<div class="myselect"> 
 
    <select class="form-control" id="test"> 
 
    <option>Test</option> 
 
    <option>Test</option> 
 
    <option>Test</option> 
 
    </select> 
 
</div>

Answer 2

如果使用的是引導，你應該可以看到右側的按鈕元素與一流的「插入符號」的跨度內。您需要更改COLOR樣式。