下拉不在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中没有工作。在ie9和ie8我得到的输出就像小提琴一样如何自定义看起来像FF＆amp;铬。

最后更新：working demo

Answer 1

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

Answer 2

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

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

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