下拉无法在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;
}

看我的小提琴演示

我自定义了下拉框的箭头，它在Chrome，FF，Opera中像截图一样工作良好，但在ie9和ie8中不起作用。 FF和Chrome。

最后更新： 工作演示

Answer 1

好吧，为了在IE中设置样式，您可能需要使实际的<select>宽于您拥有的<div> 。 您正在寻找的可能是这样的： http : //jsfiddle.net/qhCsJ/2187/

Answer 2

看起来Internet Explorer不支持外观属性-这是问题所在。

IE上的下拉箭头有一个伪元素。 尝试添加此CSS（为您的页面定制）。

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