css - 选择框的自定义 CSS

Question

我在 Firefox 中可视化我的选择框时遇到问题。

在我的网站上，我有三个选择框。在 chrome 和 IE 中，它们按应有的方式显示，但在 Firefox 中，最后一个选择框箭头总是以某种方式显示为默认值。

如果我添加一个新的或删除一个选择框，结果是一样的。

这是有问题的网站: http://johanutzon.dk/billet/

HTML代码:

<label>
    <select>
        <option selected> AARHUS </option>
        <option>ODENSE</option>
        <option>KØBENHAVN</option>
    </select>
</label>​

<label>
    <select>
        <option selected> KØBENHAVN </option>
        <option>ODENSE</option>
        <option>AARHUS</option>
    </select>
</label>​

<label>
    <select>
        <option selected> 31. MAJ 2013 </option>
        <option>2. JUNI 2013</option>
        <option>3. JUNI 2013</option>
    </select>
</label>​

CSS代码:

/* The CSS */
select {
    padding:2px;
    padding-left: 60px;
    margin-top: 10px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    background: #260B01;
    color:#FFFFFF;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    width: 300px;
    height: 29px;
    font-family: Dosis;
    font-size: 18px;
    font-weight: 400;

}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label {position:relative}
label:after {
    content:'<>';
    font:18px "Doris", monospace;
    color:#FFFFFF;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:-4px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
    opacity: 0.8;
}
label:before {
    content:'';
    right:4px; top:-7px;
    width:27px; height:28px;
        -webkit-border-radius:4px;
    -moz-border-radius:4px;
    background:#A6977C;
    position:absolute;
    pointer-events:none;
    display:block;
}

希望大家帮帮忙!

Answer 1

就放<label></label>第三次之后</label>

例如，

<label>
<select>
  <option selected=""> 31. MAJ 2013 </option>
  <option>2. JUNI 2013</option>
  <option>3. JUNI 2013</option>
</select>
</label>
&#8203;
<label></label>

就是这样。