Chrome でこのドロップダウンリストをスキニングする際に 2 つの問題があります。テキストが中央で垂直方向に整列しません。もう 1 つの問題は IE10 で、ドロップダウンリストをクリックすると、リストがその下ではなくドロップダウンリストの上に移動し、選択リストも移動します。 IE10の周りに恐ろしい黒い境界線があります.これらの問題を修正する方法を知っている人はいますか.
select::-ms-expand{
display: none;
}
select:focus
{
border-color: #139fe0;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
border-radius:5px 5px 0px 0px;
-webkit-box-shadow: 0px 0px 8px rgba(85, 190, 239, .75);
-moz-box-shadow: 0px 0px 8px rgba(85, 190, 239, .75);
box-shadow: 0px 0px 8px rgba(85, 190, 239, .75);
}
select {
outline : none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: '';
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(images/dropdown_arrow.png);
background-position: center right;
background-repeat: no-repeat;
border:1px solid #cfcfcf;
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
white-space: nowrap;
}
<select>
<option value="yourMom">Your Mom</option>
<option value="myMom">My Mom</option>
</select>