How to hide drop down arrow in IE8 & IE9?

I used the CSS below to hide the drop down arrow in FF, safari, chrome and added my own image to customize.

select {

For IE10, I used the pseudo-element


I don’t know how to apply the same for IE9 & IE8. Can anyone tell me how to hide the drop down arrow in IE8 & IE9.


You cannot remove the arrow in pure CSS for IE9 < That’s why they made ::-ms-expand for IE10.

You could, however, do something like this. jsFiddle here

In this example, you set a fixed width on select, and wrap a div with a lower width and overflow:hidden in order to mask/hide the dropdown. It has full support. This essentially does hide the arrow in all browsers.


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