在Chrome瀏覽器中無法正確顯示列表框

Question

您好我正在嘗試添加一些背景顏色和邊框到列表框中，並在選項的右側和底部顯示一些白色條。當我懸停在每個項目上，然後他們重新安排妥當。

<select> 
    <option>Hello</option> 
    <option>World</option> 
    </select>​ 

而CSS是

select { 
    background: Red; 
    border: 1px solid #ccc; 
    color: white; 
    width: 100px; 
    } 
    select option{ 
    margin : 0 
    } 

    select:active { 
    background: -webkit-linear-gradient(#666, white); 
    } 

請看到它的行動here。我可以看到每個選項右側的白色條和所有選項的底部。如何擺脫它？

Answer 1

添加option{background:red}

DEMO