dropdown list arrow icon not working properly on IE

Question

Dropdownlist arrow icon not working properly on iE but other browser is working properly.

CSS:

.custom-dropdown .option {
        line-height: 2em !important;

    }

html:

<select name="name" class="custom-dropdown" id="ddlSecurityFirstQuest" >
<option value="2">What is your pet''s name?</option>
<option value="3">What was the name of your first school?</option>
</select>

Attached image here

IE browser dropdownlist arrow working like this

enter image description here

but i need to IE browser arrrow like this

enter image description here

Note: Other browser i got like this but IE not working properly

check to this answer http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox?rq=1 — Rohit Azad Malik, May 06 '14 at 09:29
It is working properly, that is the browser update by IE 11 which is the UI to stand different from the other browser they have deigned that way..!! If you want the dropdown as like that in chrome mention it clearly in the question..! It is better to reframe the question..!! — Amarnath Balasubramanian, May 06 '14 at 10:45

score 1 · Answer 1 · answered Aug 04 '14 at 09:48

1

This problem needs different solutions for different browsers, Use this in your css for IE

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

answered Aug 04 '14 at 09:48

Samy S.Rathore

1,825
3
26
43

score 0 · Answer 2 · answered May 06 '14 at 09:50

select {

    margin: 0;
    background-position: 100% center;
    background-clip: border-box;
    background-attachment: scroll;
    background-origin: padding-box;
    background-image: url("../image/common/sleek arrow_black.svg");
    background-repeat: no-repeat;
    background-size: 8px auto;
    cursor:pointer;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

dropdown list arrow icon not working properly on IE

2 Answers2