Why doesn't my HTML checkbox work on mobile devices?

Question

I have a website and my users are not able to click my checkbox on mobile devices. I have searched online and can not find a solution to this problem.

 .jg-c-register_label { display: grid; } .jg-c-register_label-text { color: #001e4b; margin-bottom: 15px; }

 <label class="jg-c-register_label"> <span class="jg-c-register_label-text" style="margin-bottom: -5px; padding-top: 10px;"> <input type="checkbox" id="giftAid" name="giftAid" style="-webkit-appearance: auto;display: inline-block;"> I am a UK Tax Payer. I want to Gift Aid this donation and any future donation I make on this platform until further notice. </span> </label>

Answer 1

Replace -webkit-appearance: auto; with -webkit-appearance: checkbox; for the checkbox. It should work.

The checkbox does not work for my desktop also.

PS: Why have you put -webkit-appearance: none; and display: none kind of css properties when you have no custom css for you checkbox. Plus there is a lot of duplicate css in your code. Your default.css, global.css, normalize.css has same lines of code... Why...?????