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.

回答1:

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

来源：https://stackoverflow.com/questions/35993044/checkboxes-mozilla-cross-browser-issue