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>

如果知道初始＆＃34;隐藏＆＃34;复选框的外观，但我不知道如何解决问题。我该怎么做才能解决它？

Answer 1

您可以将 visibility：hidden 属性添加到复选框输入：

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