選擇標籤的外觀瀏覽器到瀏覽器

Question

這是我如何選擇標籤的屏幕截圖顯示在IE和Firefox：

如何使它在每一個瀏覽器出現一樣的嗎？

CSS代碼是：

select{ 
    width:10%; 
    margin:0; 
    padding:0; 
    box-sizing: border-box; 
    border: 2px solid #ccc; 
    border-radius: 0px 4px 4px 0px; 
    font-size: 16px; 
    background-color: white; 
    padding: 13px 0px 14px 10px; 
    background-color: lightblue; 
    color:#333; 
    margin-left: -7px; 
} 

UPDATE： 這個新的自定義選擇下拉workded在Mozilla和鉻細 選擇＃城市{ -webkit-外觀：無;/除去DEFAULT CHROME & SAFARI風格/ -moz-外觀：無;/就刪除默認FIREFOX風格/

color: #fff; 
    border-top: 2px solid #ccc; 
    border-right: 2px solid #ccc; 
    border-bottom: 2px solid #ccc; 
    border-radius: 0px 4px 4px 0px; 
    -webkit-border-radius: 0px 4px 4px 0px; 
    font-size: 13px; 
    /* padding For Mozilla*/ 
    padding: 15px 0px 14px 2px; 
    /* padding for chrome */ 
    -webkit-padding-before:15px; 
    -webkit-padding-end:0px; 
    -webkit-padding-after:13px !important; 
    -webkit-padding-start:5px; 
    width: 10%; 
    cursor: pointer; 
    margin-left: -7px !important; 
    background: #0d98e8 url(https://cdn1.iconfinder.com/data/icons/universal-icons-set-for-web-and-mobile/100/controls_0-12-512.png) no-repeat right center; 
    background-size: 40px 37px; /*TO ACCOUNT FOR @2X IMAGE FOR RETINA */ 
    box-sizing: border-box; 
} 

select#city option { 
    background-color:#fff; 
    color:black; 
} 
select::-ms-expand{ 
    display:none; 
} 

Answer 1

一個JavaScript解決方案

正如我所說，沒有這樣做的直接方式，我不會推薦這個。從here得到一些幫助後，這是我可以弄清楚在所有瀏覽器中看起來一致的唯一方法。

所以我做了什麼，

1）我刪除了所有現有樣式

select::-ms-expand{ 
    display:none; //FOR IE 
} 
select.custom-dropdown { 
    -webkit-appearance: none; /*REMOVES DEFAULT CHROME & SAFARI STYLE*/ 
    -moz-appearance: none; /*REMOVES DEFAULT FIREFOX STYLE*/ 
    border: 0 !important; /*REMOVES BORDER*/ 
} 

2）應用自定義樣式select

color: #fff; 
-webkit-border-radius: 5px; 
border-radius: 5px; 
font-size: 14px; 
padding: 10px; 
width: 35%; 
cursor: pointer; 

background: #0d98e8 url(https://cdn1.iconfinder.com/data/icons/universal-icons-set-for-web-and-mobile/100/controls_0-12-512.png) no-repeat right center; 
background-size: 40px 37px; /*TO ACCOUNT FOR @2X IMAGE FOR RETINA */ 

3）option

應用了新樣式

select.custom-dropdown option { 
    background-color:#fff; 
    color:black; 
} 

​​我嘗試的小提琴。

看看這是你想要的。

Answer 2

它很難得到它的CSS正確唯一

閱讀更多關於它在這裏https://css-tricks.com/dropdown-default-styling/

你可以使用這樣https://github.com/paulstraw/FancySelect