選択タグの出現ブラウザ

Question

これらがどのように私のselectタグのスクリーンショットですが、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：この新しいカスタマイズされた選択ドロップダウンがMozillaとクロムの微細workded 選択＃市{ -webkit-外観：なし。/DEFAULTのCHROME & SAFARIの書式を削除し/ -moz-外観：なし。/は/

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のソリューションを使用することができ、ここで https://css-tricks.com/dropdown-default-styling/

詳細情報はDEFAULT Firefoxの書式を削除します

私が言ったように、これを行うためのストレートな方法はありません、私はこれをお勧めしません。 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://github.com/paulstraw/FancySelect