DEV Community

Cover image for Custom checkbox not working
Sara Ounissi
Sara Ounissi

Posted on • Originally published at thetrendycoder.com

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)