0

我在 Chrome 中为这个下拉列表设置皮肤有两个问题，文本在中间没有垂直对齐，另一个问题是在 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>
4

0 回答 0