0

i`m trying to change the arrow icon in the Select ( drop down ) . The new Icons are show in the select box but the old arrow is still show also , any way to hide it !

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;       
}
Suresh Karia
  • 17,550
  • 18
  • 67
  • 85
Mohamed Samy
  • 931
  • 2
  • 13
  • 24

1 Answers1

1

You chose a wrong selector. You selected .SearchBar select instead of select.SearchBar
Check out this - 

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

Also for IE browser use this pseudo class to hide the arrow - 

select.SearchBar::-ms-expand {
    display: none;
}
aniskhan001
  • 7,981
  • 8
  • 36
  • 57