css - 下拉在 ie8 和 ie9 中看起来不常见

Question

html:

<span align="left" class="section_span" >
<label for="gender">Gender</label><br />
<select id="gender" name="gender" class="select-input">
<option value="">Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select><br /><br />
</span>

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;
}

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

.section_span{
    width:190px;
    float:left;
    margin-top: 5px;
    margin-right:11px;
}

我得到了下拉箭头，就像在 chrome 和 FF 的屏幕截图中一样（显示两侧箭头）。但在 ie8 和 ie9 中，它只显示向下箭头，而不显示向上和向下箭头，如 chrome 和 FF 所示。如何解决这个问题。

Answer 1

有你的定制dropdown盒子怎么样？

FIDDLE