選擇框的自定義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> 

完蛋了。