CODEWITHSUNDEEP
htmlcsscheckboxinput
Ryan
Ryan

Reputation: 1164

Checkbox styling issue in Firefox and IE

I am styling a checkbox to keep the user signed in, but I have ran into a problem that occurs within Firefox and IE. The checkbox looks like the following in all other browsers:

correct checkbox

In other IE and Firefox, the checkbox looks like this:

correct checkbox

My code is as follows:

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

If know that there is an issue with the initial "hidden" checkbox's appearance, but I don't know how to resolve the issue. What can I do to fix it?

Upvotes: 0

Views: 2914

Answers (1)

Andrey Matveev
Andrey Matveev

Reputation: 86

You can add visibility: hidden property to checkbox input:

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

Upvotes: 2

Related Questions