在IE中自定义选择

我在Internet Explorer中自定义选择有问题。当我点击选择，那么选项区域的外观非常糟糕。在铬或火狐它运作良好。在IE中自定义选择

这是我的例子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中，选项区域显示在select下方，但在IE中，选项区域显示在select上方。我想在选择项下方显示选项。这有可能实现吗？

来源

2014-11-06 Kicsi Viziló

你试过分配一个边距为第一选择？ .custom-select> select>选项：首先是选择器。您可以将它应用于IE或者CSS或JavaScript。 – 2014-11-06 12:57:10

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

这里是链接：http://jsfiddle.net/fnagel/GXtpC/light/

这工作在铬，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

来源

2014-11-14 11:22:55

在IE中自定义选择

回答

相关问题