独自のカスタム タグを作成しようとしています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;
}
box-sizing と border-bottom は Firefox でうまく機能していますが、chrome と IE ではうまく機能していません。上はスクリーンショットです
上記の画像の違いを見つけていただければ幸いです。また、JSFiddleでコードをいじりました。提案を提供してください。
前もって感謝します。