IE9 Double drop down issue

Question

Настроить изображение было добавлено в поле выбора, в каждом браузере он отлично отображался, за исключением IE9. Я вижу две стрелки - это настроенное изображение стрелки, а другой значок вниз. Как я могу удалить значок «Drop down», который появляется на IE9. Пожалуйста, помогите мне, если кто-нибудь знает.

.dropdown { 

    height: 90px; 
    overflow: hidden; 
    background: url(../images\valdropdown.png) no-repeat right; 
    background-size: 10% 100%; 
    position:relative; 
    display:inline-block; 
} 



.dropdown select { 
background: transparent; 
-o-appearance:none; 
-prefix-appearance: none; 
-ms-box-sizing:content-box; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
    overflow: hidden; 
    appearance:none 

padding:5px; 
font-size: 16px; 
line-height: 1; 
border: none; 
border-radius: 0; 
height: 50px; 
z-index: -1; 
-webkit-appearance: none; 
-moz-appearance: none; 
text-indent: 0.01px; 
text-overflow: ''; 

} 

Answer 1

Это можно сделать примерно так. Fiddle here

В примере фиксированная ширина установлена ​​на select и обертывает div с нижней шириной и overflow:hidden, чтобы скрыть или скрыть раскрывающееся меню. Он имеет полную поддержку и, по сути, скрывает стрелку во всех браузерах.

HTML

<div> 
    <select> 
     <option>one</option> 
     <option>two</option> 
     <option>three</option> 
    </select> 
</div> 

CSS

div { 
    width: 80px; 
    overflow: hidden; 
    border: 1px solid black; 
} 
select { 
    width: 100px; 
    border: 0px; 
} 

ИЛИ с чистым CSS

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

ИЛИ с заменой jQuery переключателе.
Это плагин jQuery.
jQuery selectbox plugin