Hide Default Select Drop down Arrow in IE9

Question

Ihave tried css appearance: none; to hide select drop down arrow. But In IE9 arrow shows. For reference see the image.

Any idea how to hide arrow using css or jquery?

Here is my code:

    .fields-set select{
height:32px;
border:1px solid #ccc;
margin: 0 19px 0 1%;
padding:0 32px 0 1%;
width:55%;
float: left;
overflow: hidden;
background:url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR3xT6PSVebCcTYjggESCb55GBM91fGgbyrMFbs3CGeFoQjFwVB") no-repeat scroll right center padding-box border-box #FFF;
box-shadow: none;
-webkit-appearance: none;
   -moz-appearance: none;
        appearance: none;
    -ms-appearance: none  \9;
     -o-appearance: none;
    }

possible duplicate of [Remove Select arrow on IE](http://stackoverflow.com/questions/20163079/remove-select-arrow-on-ie) — Shanaka, Apr 29 '15 at 11:32
this is [another solution] for IE9 problem (http://stackoverflow.com/a/36137767/6094848) — Alberto, Mar 21 '16 at 17:38

score 7 · Answer 1 · edited May 23 '17 at 10:31

7

You can use a pseudo-element for the drop-down arrow in IE.

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

reference

edited May 23 '17 at 10:31

Community

1
1

answered Apr 29 '15 at 11:29

Suresh Karia

17,550
18
67
85

score 2 · Answer 2 · answered Apr 29 '15 at 11:53

Try this

.myclass::-ms-expand{display:none}
.myclass{
    -moz-appearance:none;
    -webkit-appearance:none;
    text-indent:0.01px;
    text-overflow:''; 
    background:url('https://www.holidayme.com/Images/uparrow.jpg') no-repeat 95% center #fff;
    border:1px solid #ccc; 
    width:100%;border-radius:0;
    color:#666;border-radius:3px;
    width:200px;
   padding:10px 5px;
}

check the fiddle for more....

Hide Default Select Drop down Arrow in IE9

2 Answers2

reference