css - 选择标记外观浏览器到浏览器

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 中运行良好 选择#城市{ -webkit 外观:无；/移除默认的 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

正如我所说，没有直接的方法可以做到这一点，我不推荐这样做。从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) 在选项上应用新样式

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

Here's我尝试的 fiddle 。

看看这是不是你想要的。