在ie8＆amp; amp; 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;
}

我正在获取下拉箭头，就像在屏幕截图中的铬和FF（显示两个侧箭头）。但是在ie8和ie9中它只显示向下箭头而不显示向上和向下箭头，如铬和FF。如何解决这个。

Answer 1

如何使用自定义的dropdown框？

FIDDLE