我正在尝试创建自己的自定义 select标签，但遇到了一个奇怪的问题。
下面是我的代码：
HTML：
<div class="drop_select">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
CSS：
.drop_select {
width:180px;
height: 34px;
overflow: hidden;
background: url(http://s22.postimg.org/liq7aghz5/select_icons.png) no-repeat 148px -165px #000000;
border-radius: 10px;
margin-bottom: 5px;
transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-webkit-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
}
.drop_select:hover {
background-position: 148px -115px;
}
.drop_select select {
background: rgba(0, 0, 0, 0);
-moz-background: transparent;
-webkit-background: transparent;
width: 202px;
padding: 8px 5px 8px 8px;
font: 12px arial;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
-o-appearance: none;
color: #ffffff;
-o-background: #000000;
}
.drop_select:hover select {
color: #ebb52d;
}
.drop_select select option {
color: #fff;
text-indent: 5px;
padding: 7px 0px 7px 3px;
width: 182px !important;
background: #000;
border-bottom: dotted 1px #515151;
transition: background 0.5s ease-in-out;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
}
.drop_select select option:hover, .drop_select select option:focus, .drop_select select option:active {
background: #515151 !important;
color: #dfb52d;
}
我在 Firefox 中使用 box-sizing 和 border-bottom 效果很好，但在 chrome 和 IE 中却不行。以上是截图
希望你能在上面的图片中找到不同之处。另外我在JSFiddle中修改了我的代码，请为您提供建议。
提前致谢。