How to delete default dropdown arrow in Internet Explorer 8 IE8?

Question

This css code doesn't work.

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

Code of my dropdown:

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

select {
    width: 100px;
    height: 30px;
    -webkit-appearance: none; /* gets rid of default appearance in Webkit browsers*/
    -moz-appearance: none; /* Get rid of default appearance for older Firefox browsers */
    -ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/
    appearance: none;
    background-color: none;
    border: none;
    border-top-right-radius: 0px;
    border-bottom-right-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-bottom-right-radius:0px;
    background-image: url('../img/arrow_question.png');
    background-position: center;
    background-size: 30%;
    background-repeat: no-repeat;
}

enter image description here

I've been looking for a long time and can't find a solution.

this will help you. http://stackoverflow.com/questions/19407332/how-to-hide-drop-down-arrow-in-ie9 — Kheema Pandey, May 08 '14 at 11:15

score 1 · Answer 1 · answered May 08 '14 at 11:12

Use appearance: none; to achieve what you are looking for.

For instance,

select{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url("yourBackroundImagePath.extension") no-repeat scroll 0 0 transparent;

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

Hope this helps.

score 1 · Accepted Answer · answered May 08 '14 at 12:05

1

This helped:

div {
    width: 80px;
    overflow: hidden;
    border: 1px solid black;
}
select {
    width: 100px;
    border: 0px;
}

answered May 08 '14 at 12:05

Gilko

2,280
8
36
45

How to delete default dropdown arrow in Internet Explorer 8 IE8?

2 Answers2