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

Answer 1

You've asked for a solution for IE8 and IE9.

Let's start with IE8. Short answer: It's not possible. Because of the way IE8 and earlier render select boxes, you simply cannot hide the drop-down arrow. Select box controls are impossible to style in old IE, and always appear positioned above any other content.

There simply isn't any solution to this, other than rewriting the entire select box control in Javascript.

Now IE9. You can hide the drop-arrow. It's not a standard thing, but you can hack it.

You need to start with a wrapper element (eg a <div>) around your select box. You can then style this with a :before selector to place an extra bit of content over the top of the drop-arrow, effectively hiding it.

Here's the CSS:

div {
    position:relative;
    display:inline-block;
    z-index:0
}
div select {
    z-index:1;
}

div:before {
    display:block;
    position:absolute;
    content:'';
    right:0px;
    top:0px;
    height:1em;
    width:1em;
    margin:2px;
    background:red;
    z-index:5;
}

...and see here for the jsFiddle to see it in action.

Note, I've used red as the overlay colour to make it obvious what's happening. Clearly in normal use you'd want to use white so it doesn't stand out.

You'll also note that as I stated above, this does not work in IE8.

Obviously, this isn't the same as the "proper" solution for IE10 and other browsers, which actually remove the arrow; all we're doing here is hiding it. And this means that we end up with an annoying white patch at the end of the select box where the arrow used to be.

We can do further styling to solve this: eg if we make the container element a fixed width and with overflow:hidden, we can get rid of the white patch, but then we have issues with the borders of our select box being broken, so we have to do further styling fixes; it can all get a bit messy. Plus of course, this option only works if the select box itself is a known fixed width.

So there you have it: There are options for doing this in IE9. They're not pretty though, and frankly may not be worth the effort. But if you're desperate, you can do it.

Oh, and don't forget to make this CSS code specific so it only runs on IE9, otherwise it will cause issues on other browsers.