How to hide drop down arrow in IE8 & IE9?

Question

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-appea         


        

Answer 1

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;
}