选择框在IE9中无法正常工作

Question

在选择框中，arrow_down.png图片在IE中没有正确显示，但是在所有浏览器中它都是正确的，因为默认情况下向下箭头按钮如何制作这样的

IE中的结果

我想在IE中如何

<select id="Event-Type" class="custom-select w-select search-input event-type">
<option value="">Select</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
</select>
</div>


<style>
.selectbox-new {
    background: #fff url("../images/arrow_down.png") no-repeat scroll right center;
    border: 1px solid #ccc;
    border-radius: 7px;
    float: left;
    font-size: 13px;
    height: 40px;
    line-height: 32px;
    margin: 0 5px 5px 0;
    overflow: hidden;
    padding: 0;
    width: 175px;
}

.search-input.event-type {
    border-radius: 0;
    display: inline-block;
    font-size: 13px;
    width: 175px;
}

.selectbox-new select {
    -moz-appearance: none;
    background-color: transparent;
    background-image: none;
    border: medium none;
    box-shadow: none;
    width: 130px;
}
.search-input {
    background-color: #ffffff;
    border-radius: 7px;
    display: block;
    float: none;
    height: 40px;
    margin-bottom: 5px;
    margin-right: 5px;
    padding-bottom: 0;
    padding-right: 0;
    padding-top: 0;
    position: relative;
    width: 600px;
}
.w-input, .w-select {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    color: #555555;
    display: block;
    font-size: 14px;
    height: 38px;
    line-height: 1.42857;
    margin-bottom: 10px;
    padding: 8px 12px;
    vertical-align: middle;
    width: 100%;
}
</style>

Answer 1

Plz试试这个：

Demo

<select id="Event-Type" class="custom-select w-select search-input event-type">
<option value="">Select</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
</select>

Answer 2

您可以尝试以下内容：

.selectbox-new::-ms-expand {display: none;} /*FOR IE*/

有关详细说明，请参阅有关HTML Select元素的高级CSS样式的文章：http://www.codeproject.com/Tips/890021/Advanced-CSS-Styling-of-HTML-SELECT-Element

希望这可能会有所帮助。最好的注册，