jquery - 隐藏下拉菜单箭头图标

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;
}