关于最新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 is not hiding select box arrows anymore

解决此错误的一种快速方法是将其包装在一个不如选择下拉列表那么宽的容器中。然后，您将使用下拉箭头设置容器的样式。

Here's an example.

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;
}