select去除默認樣式

<select class="form-control leftrange">
    <option selected>--請選擇--</option>
    <option>學生</option>
    <option>老師</option>
    <option>管理員</option>
   <option>用戶</option>
  </select>
 <span class="glyphicon glyphicon-chevron-down selecticon" > </span>

select {
  /*Chrome同Firefox與IE里面的右側三角顯示的樣式不同*/
  border: solid 1px #ddd;
  /*將默認的select選擇框樣式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  padding-right: 14px;
  /*如果要加入自定義圖片， 就增加這個屬性 background: url或者在html中直接加入圖標也行*/
}
/*清除iIE的默認選擇框樣式*/
select::-ms-expand { display: none; }

最近項目中遇到了自定義下拉框的默認樣式在谷歌，火狐，IE上顯示不同的問題。

左側圖片就是重寫的樣式，下拉框的右側三角是選用的bootstrap里面的圖片，通過絕對定位放過去的。

原文：https://www.cnblogs.com/iriliguo/p/7041375.html