选择标签外观浏览器到浏览器

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

更新：         这款全新的定制精选下拉式适用于mozilla和chrome          选择#city {         -webkit-appearance：none; / 删除DEFAULT CHROME＆amp; SAFARI STYLE /         -moz-appearance：none; / 删除默认FIREFOX STYLE /

    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

正如我所说，没有直接的做法，我不会推荐这个。在获得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;
}

Here's我尝试的小提琴。

看看这是否是你想要的。