html - 在 IE 中自定义选择

Question

我在 Internet Explorer 中使用自定义选择时遇到问题。当我点击选择时，选项区域的外观非常糟糕。在 chrome 或 firefox 中运行良好。

这是我的例子https://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

我找到了一个很好的解决方案:

这是链接:https://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