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

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

仅使用 css 很难使其正确

在此处了解更多信息https://css-tricks.com/dropdown-default-styling/

你可以使用像https://github.com/paulstraw/FancySelect这样的javascript解决方案

Answer 2

正如我所说，没有直接的方法可以做到这一点，我不会推荐这样做。在得到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 我尝试的小提琴。

看看这是不是你想要的。