Is there a way to hide the old arrow icon in the Select (drop down) after changing it with a new one?
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;
}