0

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Denis Saidov
  • 93
  • 1
  • 10

1 Answers1

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

Timotheus0106
  • 1,536
  • 3
  • 18
  • 28
  • Only issues I've had with wrapping labels is the lack of a parent selector in CSS... What exactly is the problem with using a wrapping label? It saves on locs and doesn't require `id` collision avoidance. (I have a feeling it's something IE related...) – abluejelly Mar 14 '16 at 17:34
  • im not sure if there is any difference.. just give it a try... i thought because css executes from top to bottom it may not work with the "input[type=checkbox]:checked + label:before" selector.. :) – Timotheus0106 Mar 15 '16 at 09:29
  • I must have zoned out when I was looking at this one and posted that... You're correct that you have to use `id`s to be able to be able to style the `label` differently when it is "checked", however, you absolutely _must_ do it that way due to a lack of parent selector. In other words, it's not even an option to use a wrapping label in this context. – abluejelly Mar 16 '16 at 18:19
  • @TimotheusTriebl Could you please, help. Tried what you've said and everything got messed up: http://apespark.com/formifyPro/examples/login.html – Denis Saidov Mar 16 '16 at 22:27
  • hm dont see the messup.. the checkbox now works in ff – Timotheus0106 Mar 17 '16 at 09:18