drop down not working in ie8 and ie9

Question

html:

<div class="select-input">
     <select>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>           
     </select>  
 </div>

css:

.select-input{
    width:180px;  
    padding:5px;
    font-family: "Helvetica-Light";
    font-size: 9pt;
    color:#2a2a2a;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -o-appearance: none;
    background: #ffffff url(".../images/select-arrow.png") no-repeat;
    background-position:143px center;
    overflow:hidden;

}
 .select-input{
 border-style:solid;
    border-width:thin; 
    border-color: #DDDDDD;
    margin-top:5px;
}

see my demo in fiddle

I customized the arrow of drop down box and it is working good in Chrome,FF,Opera like in screenshot but not working in ie9 and ie8.In ie9 and ie8 i am getting the output like in fiddle so how to customize that look like in FF & Chrome.

Last Update: working demo

Answer 1

Well, in order to style those in IE, you might need to get the actual <select> to be wider than the <div> you have. What you are looking for is probably something like this: http://jsfiddle.net/qhCsJ/2187/

Answer 2

It looks like the appearance property is not supported in Internet Explorer- this is the problem.

There's a pseudo-element for the dropdown arrow on IE. Try adding this CSS (customized for your page).

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