Skip to content
Related Articles

Related Articles

How to Make Entire Custom Checkbox/Div Clickable ?

Improve Article
Save Article
  • Last Updated : 29 Jun, 2021
Improve Article
Save Article

It is always a good option to use custom checkboxes in your websites instead of old-school HTML checkboxes.

This article provides a step-by-step implementation for the same.


  • Use the input type checkbox and link a label with it in HTML.
  • Hide the input checkbox and style the label as per your requirement.
  • Change the styling as the checkbox state changes.

HTML code:


<!DOCTYPE html>
        label {
          border:solid 2px green;
          width: 200px;
          line-height: 40px;
       <!-- hide input -->
       input[type=checkbox] {
          display: none;
       <!-- Add ✓ on checked before label -->
       input:checked + label:before {
          content: "✓ ";
       <!--Add styling on check -->
       input:checked + label {
          border: solid 2px purple;
          color: purple;
    <input id="apple" type="checkbox" name="apple" />
    <label for="apple">Apple</label>



Supported Browser: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!