HTML select option CSS設定在Safari 和 Firefox各運作出不同的問題

如有一<select></select>可經由CSS設定後，在Chrome下變成如下所示：

由圖可見，它的height and width, text-indent都有被調整過，但在Firefox下所見則會變成：

由於text-indent會讓Firefox將select的值跟下拉圖示移位，因此必須拿掉text-indent，Firefox可經

由padding-left做調整，而IE也不吃text-indent，但他照預設一樣置左，也可透過padding-left。

經由調整後，Firefox還是會造成如下所示：

此時若透過padding-top設定，字雖然可以垂直置中，但也會動到右側的下拉圖示，因此可

再透過padding-bottom來均衡一下XD

而透過Safari瀏覽的話，height的調整會不work，可以透過line-height作調整即可！整理如下：

Chrom部分

 
.chrome_select_style{
  text-indent:120px; 
  width:300px; 
  height:35px;
  text-align:left;
}

Safari部分

 
.safari_select_style{
  text-indent:120px; 
  width:300px; 
  line-height:35px;
  text-align:left;
}

IE(可不包含padding-top,bottom)、Firefox部分

 
.ie_firefox_select_style{
  padding-left:120px;
  width:300px; 
  height:35px;
  text-align:left;
  padding-top:7px;
  padding-bottom:7px;
}