Question

我在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>

DropDownList自定义CSS皮肤

0 个答案: