How to Hide Drop Down Arrow in IE8 & IE9

Remove Select arrow on IE

In IE9, it is possible with purely a hack as advised by @Spudley. Since you've customized height and width of the div and select, you need to change div:before css to match yours.

In case if it is IE10 then using below css3 it is possible

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

However if you're interested in jQuery plugin, try Chosen.js or you can create your own in js.

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

This helped:

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

How to remove the default arrow icon from a dropdown list (select element)?

If you use TailwindCSS
You may take advantage of the appearance-none class.

<select class="appearance-none">
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>

IE & Firefox - custom drop down could not remove native arrows

Use this it will work but with IE10+ and for FF :

Your css should look like this:

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

More about ::ms-expand.

Then for the rest :

select.desktopDropDown {
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : '';
    background : url("../img/assets/arrow.png") no-repeat right #666;

    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
}

Note: I hardcoded path "../img/assets/arrow.png" as background.

This should work good for you in IE, Firefox and Opera .

---

Related Topics