Question

我正在尝试更改选择（下拉）中的箭头图标。新的图标显示在选择框中，但旧的箭头仍然显示，任何方式隐藏它！

HTML：

<div class="row">
    <div class="col-sm-12">
        <select name="country" class="form-control SearchBar">
        <option value="ماليزيا">ماليزيا</option>
        <option value="تركيا">تركيا</option>
        <option value="النمسا">النمسا</option>
        <option value="تايلاند">تايلاند</option>
        <option value="إندونيسيا">إندونيسيا</option>
        </select>
    </div>
</div>

CSS：

#Landing_container .SearchBar {
    height: 45px;
    font-family: 'gess_two_Light' !important;
    font-size: 19px;
    border-radius: 5px;
    display: block;
    border: 1px solid #B2B2B2;
    background-image: url(../img/main/pointer.png), url(../img/main/dropdown-arrow.png);
    background-repeat: no-repeat;
    background-position: right 10px center, left 10px center;
    padding-right: 35px;
}

.SearchBar select {
    background: transparent;
    -webkit-appearance: none;       
}

Answer 1

您选择了错误的选择器。您选择了.SearchBar select而不是select.SearchBar。请查看此内容 -

select.SearchBar {
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

同样对于IE浏览器，使用此伪类来隐藏箭头 -

select.SearchBar::-ms-expand {
    display: none;
}

隐藏下拉菜单箭头图标

1 个答案: