在Chrome瀏覽器中選擇器中的樣式CSS

-1

我有一個帶有<select>元素的表單。背景是黑色的，但在某些瀏覽器中沒有任何問題。因爲箭頭周圍的方格是白色的。但在Chrome中，這個方塊獲得相同的顏色（黑色），箭頭無法看到。在Chrome瀏覽器中選擇器中的樣式CSS

如何更改CSS選擇器中箭頭周圍正方形的顏色？

.years{ 
 
    background: none repeat scroll 0 0 #111111; 
 
    border: 1px solid #444444; 
 
    border-radius: 3px; 
 
    color: #CCCCCC; 
 
    height: 20px; 
 
    margin-bottom: 7px; 
 
    padding: 0.15em; 
 
}

<form> 
 
    <select class="years" name="years"> 
 
    <option value=""></option> 
 
    <option value="1y">1 year</option> 
 
    <option value="3ys">3 years</option> 
 
    </select> 
 
</form>

JSFiddle

來源

2014-03-07 user2794692

請你能提供一個小提琴嗎？「選擇器形式」是什麼意思？你的意思是「選擇」？ – fcalderan

你的意思是'元素 – user2794692

選擇元素很難款式，尤其是箭頭部分。

常用的解決方法是這樣的：

<div class="customSelect"> 
    <select> 
     <option>I like StackOverflow</option> 
     <option disabled>Nah, I don't</option> 
    </select> 
</div>

設置width到select略多於.customSelect的，然後應用overflow:hidden和附加的背景圖片（箭頭圖像）.customSelect和設置位置（right:0）。

來源

2014-03-07 13:06:37

在Chrome瀏覽器中選擇器中的樣式CSS

回答

相關問題