Skip to content
Related Articles

Related Articles

Improve Article

How to Make Entire Custom Checkbox/Div Clickable ?

  • Last Updated : 29 Jun, 2021

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.

Approach: 

  • 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:

HTML




<!DOCTYPE html>
<html>
  <head>
   
    <style>
        label {
          display:block;
          border:solid 2px green;
          width: 200px;
          height:40px;
          margin-top:10px;
          color:green;
          text-align:center;
          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;
       }
      </style>
  </head>
  <body>
    <input id="apple" type="checkbox" name="apple" />
    <label for="apple">Apple</label>
  </body>
</html>

Output: 

Result

Supported Browser: 

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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :