Open In App

How to Make Entire Custom Checkbox/Div Clickable ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to learn how to make the entire custom checkbox/Div clickable. A custom checkbox is achieved by hiding the default checkbox input and styling a label element to resemble a checkbox using CSS. The label is associated with the checkbox using the for attribute, and the appearance changes when the checkbox is checked using CSS selectors. 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.

Example: In this example, we are using the above-explained approach.

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


Last Updated : 05 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads