select下拉框的樣式在瀏覽器上的兼容問題 - iriliguo－IT工程師數位筆記本

文章出處

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

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

css:

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; }

html:

  <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>