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 {
  -webkit-appearance:none;
  -moz-appearance:none;
  -o-appearance:none;
  appearance:none;
}

For IE10, I used the pseudo-element

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

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.


solution

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.

CSS

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