Search code examples
htmlcsscheckboxcross-browsermozilla

Checkboxes Mozilla Cross-Browser issue

I'm experiencing some issues with my checkboxes on Mozilla. The checkbox (on http://apespark.com/formifyPro/examples/login.html) works totally fine on Chrome, but on Mozilla it looks like the default checkbox. I tried and added-moz-appeareance: none, but as it seems it's not reading the pseudo (::before and ::after) elements. I really can't understand and see why it's not displaying as supposed to.

Solution

  • you should style your label and not the input field.

    label {
    display: inline-block;
    cursor: pointer;
    // your styles here for text.

}
label:before {
    content:"";
    // styles here for the actual checkbox
}
input[type=checkbox] {
    display: none;
}
input[type=checkbox]:checked + label:before {
    content:"";
    // styles here when checkbox is checked
}

    to be safe you should change your html from a wrapping label like you have

    <label><input /></label>

    to a referencing one like so

    <input id="myInput" />
<label for="myInput"></label>

    greetings timotheus