javascript - 下拉在 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 中不起作用。在 ie9 和 ie8 中，我得到了像小提琴一样的输出，所以如何自定义它看起来像FF 和铬。

最后更新：工作演示

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

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

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

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