CSS選擇框箭頭樣式

Question

我想從選擇框中刪除默認箭頭並想使用自定義圖標。從以前的SO回答中，我發現這是不可能的（使其與主流瀏覽器一起使用）。唯一的可能性是將選擇內容包裝在div中，並將其寬度設置爲大於div寬度並設置overflow：hidden。 我正在嘗試關注，但它不起作用。我做錯了什麼？

HTML：

<div class="selectParent"> 
    <select> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option>   
    </select> 
</div> 

CSS：

.selectParent{ 
    width:80px; 
    overflow:hidden; 
} 

.selectParent select{ 
    width:100px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    padding: 2px 30px 2px 2px; 
    border: none; 
    background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center; 
} 

的jsfiddle： http://jsfiddle.net/gcPmC/

Answer 1

檢查了這一點

左側

http://jsfiddle.net/afshinprofe/qhCsJ/1/

右側

​​

Answer 2

嘗試更換

padding: 2px 30px 2px 2px; 

與

padding: 2px 2px 2px 2px; 

它應該工作。