How to change `select` element for IE? [duplicate] - css

Question

This question already has answers here:
Remove Select arrow on IE
(3 answers)
Closed 6 years ago.
I saw this answer to render an arrow on select element:
select {
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 5px;
height: 34px;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 244px;
}
http://jsfiddle.net/qhCsJ/4120/
It works great for Chrome.
For Firefox the -moz-appearance: none; will do the trick.
But for IE I have no idea.

Answer 1

Add this (IE 10 + I guess):
select::-ms-expand {
display: none;
}
credits here: Remove Select arrow on IE
For IE9, wrap your select with a div and use something like this (a image that will be over the original one):
select {
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 5px;
height: 34px;
-webkit-appearance: none;
background-position-x: 244px;
}
select::-ms-expand {
display: none;
}
div {
position:relative;
display:inline-block;
border:solid black 1px;
z-index:0
}
div select {
z-index:1;
}
div:before {
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_up.png) no-repeat right #ddd;
display:block;
position:absolute;
content:'';
right:6px;
top:5px;
height:1em;
width:1em;
margin:2px;
z-index:5;
}
IE 8 or before you can't.