Open In App
Related Articles

How to Make Entire Custom Checkbox/Div Clickable ?

Improve Article
Save Article
Like Article

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.


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


<!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

Last Updated : 05 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials