最新的Firefox版本的CSS下拉菜單屏幕問題

Question

我有CSS下拉菜單。 它在choreme或舊的Firefox版本上可以正常工作，但是當我在使用Firefox最新版本和Internet Explorer進行顯示時，遇到了一些問題。 我該如何解決？

<div class="btnRent"> 
<label>
    <select>
        <option selected> Select Box </option>
        <option>Short Option</option>
        <option>This Is A Longer Option</option>
    </select>
</label>
</div>

CSS

/* The CSS */
.btnRent select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

.btnRent label {position:relative; text-align:center;}
.btnRent label:after {
    content: "<>";
    font: 11px "Consolas",monospace;
    color: #AAA;
    transform: rotate(90deg);
    right: -1px;
    top: -1px;
    padding: 0px 0px 2px;
    position: absolute;
    pointer-events: none;
    border: 0px none;
    outline: 0px none;
    width: 25px;
    height: 20px;
    float: right;
    background: #f8f8f8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.btnRent label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    border: 0;
    outline: 0;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

Answer 1

這是最新版本的FireFox的錯誤。 在此處查看更多信息： Firefox 30不再隱藏選擇框箭頭

解決此錯誤的快速方法是將其包裝在不如您選擇的下拉菜單那么寬的容器中。 然后，您將使用下拉箭頭為容器設置樣式。

這是一個例子。

HTML

<div class="select-hide">
    <select>
        <option>1</option>
        <option>1</option>
        <option>1</option>
        <option>1</option>
    </select>
</div>

CSS

.select-hide{
    width: 85px;
    overflow:hidden;
    border:1px solid red;
}

select{
    width: 100px;
}