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