2016-08-10 251 views
1

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

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

SELECT BOX

+1

你能後的CSS和負責t的HTML代碼他的下拉菜單出現。 – AmanSinghal

+0

您是否搜索該網站?爲什麼這些解決方案不適合你? – PeeHaa

回答

4

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

+0

雖然這幾乎完成了工作,但單擊箭頭不會觸發select元素,因此失去了一些相關性。 –

+0

現在請檢查 –

+0

我喜歡這個解決方案。做得很好! – Julsy

4

試試這個代碼段,

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