CODEWITHSUNDEEP
jquerycsstwitter-bootstrap-3
Mohamed Samy
Mohamed Samy

Reputation: 941

Hide the Dropdown Menu arrow Icon

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

Upvotes: 0

Views: 1466

Answers (1)

aniskhan001
aniskhan001

Reputation: 8521

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

Upvotes: 1

Related Questions