Пользовательский выбор в IE

Question

У меня проблема с пользовательским выбором в Internet Explorer. Когда я нажимаю, чтобы выбрать, то появление области области очень плохо. В Chrome или firefox он работает хорошо.

Это мой пример http://jsfiddle.net/kxytwo0e/1/. Если вы откроете его с помощью IE, и вы выберете последний параметр, то вы снова нажмете на выбор, и вы увидите проблему.

Вот мой HTML-код:

<div class="custom-select"> 
    <select> 
     <option>Here is the first option</option> 
     <option>The second option</option> 
     <option>The 3 option</option> 
     <option>The 4 option</option> 
    </select> 
</div> 

А вот мой CSS код:

/*custom-select start*/ 

.custom-select {    
    padding: 0; 
    position: relative; 
    height: 36px; 
    width: 100%; 
    z-index: 1; 
    /*margin-left: 2px;*/   
} 

.custom-select:hover { border-color: #999; } 
.custom-select:before { 
    background: url("../img/arrow-down.jpg") no-repeat right center; 
    // color: #333; 
    content: ""; 
    height: 100%; 
    padding: 0 0 0 20px; 
    position: absolute; 
    top: 0; 
    right: 20px; 
    z-index: -1; 
} 

@-moz-document url-prefix() { 
    .custom-select:before { 
     height: 34px; 
     right: 0px; 
    } 
} 

.custom-select select { 
    background-color: transparent; 
    border: 1px solid #b9b9b9; 
    /*color: #555;*/ 
    height: 100%; 
    width: 100%; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
} 

.custom-select select::-ms-expand { display: none;} 
.custom-select select:focus { outline: none; } 
.custom-select select option{ 
    padding: 2px; 
} 

:-moz-any(.custom-select):before { 
    background-color: #fff; 
    pointer-events: none; 
    z-index: 1; 
    margin-top: 1px; 
    margin-right: 1px; 
    border-radius: 3px; 
} 
/*custom-select end*/ 

Спасибо.

Редактировать: Я понял, что нижний предел действителен, потому что я не уточнил, чего я ожидаю и что получаю вместо этого. В Chrome и FireFox область опций отображается чуть ниже выбора, но в IE область выбора отображается над выбором. Я хотел бы показать, что этот параметр находится чуть ниже выбора. Можно ли это достичь?

Answer 1

я нашел хорошее решение:

Вот ссылка: http://jsfiddle.net/fnagel/GXtpC/light/

Это работает в Chrome, Firefox и IE тоже.

Вот HTML код:

<select name="speedC" id="speedC"> 
     <option value="Slower" class="whoo">Slower</option> 
     <option value="Slow">Slow</option> 
     <option value="Medium" selected="selected">Medium</option> 
     <option value="Fast">Fast</option> 
     <option value="Faster">Faster</option> 
    </select>` 

И вы должны поставить CSS и JS-код тоже.

И не забудьте добавить их в свой проект:

jquery.ui.core.css

jquery.ui.theme.css

jquery.ui.selectmenu.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.position.js

jquery.ui.selectmenu.js