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*/

谢谢。

编辑：我意识到downvote是有效的，因为我没有说明我的期望和我得到的东西。在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

在IE中自定义选择

1 个答案: