Custom checkbox not working

Customizing checkboxes is a little tricky, it requires a lot of additional CSS to make it look nice. One important thing to remember while doing that is to make sure the id you use on the input is the same as the for on the label.

Example :

<p>Choose your favorite fruit:</p>

<div>
  <input type="checkbox" id="apple" name="apple"
         checked>
  <label for="apple">Apple</label>
</div>

<div>
  <input type="checkbox" id="orange" name="orange">
  <label for="orange">Orange</label>
</div>