Firefox和IE中的複選框樣式問題

Question

我正在設計一個複選框來保持用戶登錄，但我遇到了Firefox和IE中出現的問題。複選框看起來像所有其他瀏覽器的情況如下：

在其他IE和Firefox，複選框看起來像這樣：

我的代碼如下：

<label id="checkbox"> 

    <input type="checkbox" name="signinForm_keepSignedIn" id="signinForm_keepSignedIn" checked> 

    <span id="checkbox_span"></span> 

</label> 

<style> 

    #checkbox { 
     position: absolute; 
     left: 0px; 
     margin-left: 30px; 
     margin-top: 185px; 
     width: 110px; 
     height: 16px; 
    } 

    #signinForm_keepSignedIn { 
     -webkit-appearance: none; 
     -moz-appearance: none; 
     -o-appearance: none; 
     appearance: none; 
     position: absolute; 
     border: none; 
     background-color: transparent; 
    } 

    #checkbox_span { 
     position: absolute; 
     width: 16px; 
     height: 16px; 
     display: block; 
     background: url("resources/images/elementBackgrounds/checkbox_unchecked.png"); 
     cursor: pointer; 
    } 

    #signinForm_keepSignedIn:checked + #checkbox_span { 
     background: url("resources/images/elementBackgrounds/checkbox_checked.png"); 
    } 

</style> 

如果知道初始「隱藏」複選框的外觀有問題，但我不知道如何解決問題。我能做些什麼來解決它？

Answer 1

您可以添加visibility：hidden的屬性複選框輸入：

#checkbox input[type=checkbox] { 
    visibility: hidden; 
}