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