выпадающий не работает в IE8 и 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; 
} 

посмотреть мой демо в fiddle

Я настроил стрелку выпадающего списка и он работает хорошо в Chrome, FF, Opera, как на скриншоте, но не работает в ie9 и ie8.In ie9 и ie8. Я получаю вывод, как в скрипке, так, как настроить это, как в FF & Chrome.

Последнее обновление: working demo

Answer 1

Похоже свойством внешнего вида не поддерживаются в Internet Эксплорер это проблема.

Существует псевдоэлемент для стрелки вниз по IE. Попробуйте добавить этот CSS (настроенный для вашей страницы).

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

Answer 2

Ну, для того, чтобы стиль тех, кто в IE, что вам может понадобиться, чтобы получить фактический <select> быть шире, чем <div> у вас есть. То, что вы ищете, вероятно, примерно так: http://jsfiddle.net/qhCsJ/2187/