下拉的箭頭一般是瀏覽器預設的，但是有時候會感覺它很醜或者與實際想要的箭頭效果不一樣。百度總結幾種方法。

1.將瀏覽器預設的下拉框樣式清除，然後應用上自己的，再附一張向右對齊小箭頭的圖片即可。

select {
  /*Chrome和Firefox裡面的邊框是不一樣的，所以複寫了一下*/
  border: solid 1px #000;

  /*很關鍵：將預設的select選擇框樣式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*在選擇框的最右側中間顯示小箭頭圖片*/
  background: url("http://ourjs.github.io/static/2015/arrow.png"
 
) no-repeat scroll right center transparent;


  /*為下拉小箭頭留出一點位置，避免被文字覆蓋*/
  padding-right: 14px;
}


/*清除ie的預設選擇框樣式清除，隱藏下拉箭頭*/
select::-ms-expand { display: none; }

2.為其新增一個父容器，容器是用來覆蓋小箭頭的，然後為select新增一個向右的小偏移或者寬度大於父級元素。設定父級的CSS屬性為超出部分不可見，即可覆蓋即小箭頭。然後再為父級容器新增背景圖片即可。overflow: hidden並不能隱藏下拉框的顯示。舊版ie不支援appearance，一般是用的這種方法。

<span style="font-family:KaiTi_GB2312;font-size:14px;"><div id="parent">  
  <select>  
      <option>what</option>  
      <option>the</option>  
      <option>hell</option>  
  </select>  
</div></span>  

<span style="font-family:KaiTi_GB2312;font-size:14px;"
 
> #parent {  
    background: url('yourimage') no-repeat;  
    width: 100px;  
    height: 30px;  
    overflow: hidden;  
}  

#parent select {  
    background: transparent;  
    border: none;  
    padding-left: 10px;  
    width: 120px;  
    height: 100%;  
}</span>