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

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

#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>

來源

2017-06-05 Nafi Pantha

你能告訴我們你迄今爲止嘗試過的代碼？ –

@ nafi-pantha ..你可以在這裏發佈你的代碼嗎， –

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

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

.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>

來源

2017-06-05 18:27:22 LGSon

謝謝你......感謝它......與此相關的另一個問題，如果有任何方式來居中文本或它像去一樣？ –

@NafiPantha不，不能居中文本。如果你需要這個，你需要創建一個自定義選擇元素。 – LGSon

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

來源

2017-06-05 18:17:28 Chere

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

回答

相關問題