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.

Answer 2

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

Answer 3

The only way to accomplish this in older versions of IE is to wrap the <select> in a slightly smaller container and set overflow: hidden; This would hide the arrow on the right side but still allow you to open the drop-down by clicking on it. It's messy but it's the only way to accomplish what you want.

In the past these elements have not been styleable because they were considered part of the operating system. It appears that this is becoming less of an issue now that the pseudo-elements like you mentioned are available.

Answer 4

not sure about every use case, but in my case with a fixed width x height bg pic set up for the parent, this worked for IE and FF too:

HTML

<div id="parent">
  <select>
    ...
  </select>
</div>

CSS

#parent{
  ...
  overflow: hidden;
  width:100px; // for example
}

#parent select{
  ...
  width:120px;
}

jsfiddle

Answer 5

Another bad but functionally solucion for IE9 :D

Preview

// CSS

div {
    position:relative;
    display:inline-block;
    border:solid black 1px;
    z-index:0
}
div select {
    z-index:1;
    border:none;
    width:200px;
}

div:before {
    display:block;
    position:absolute;
    content:url('http://help.eclipse.org/mars/topic/org.eclipse.stardust.docs.enduser/html/handbooks/execution-clients/rules/images/arrow.png');
    right:-2px;
    top:-1px;
    padding-left:2px;
    height:18px;
    width:15px;
    margin:2px;
    background:white;
    z-index:445;
    border: 0;
}

All you need is encapsulate this code with this IE9 media query hack

/* IE9 */
    @media screen and (min-width:0\0) {

    }
/* IE9 */

jsFiddle