How to Make Entire Custom Checkbox/Div Clickable ? Last Updated : 05 Jun, 2023 Comments Improve Suggest changes Like Article Like 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 ChromeInternet ExplorerFirefoxOperaSafari Comment More infoAdvertise with us Next Article How to create an HTML checkbox with a clickable label? P priyankrastogi Follow Improve Article Tags : JavaScript CSS-Basics CSS-Properties Similar Reads How to create an HTML checkbox with a clickable label? To create an HTML checkbox with a clickable label, use the <label> element and associate it with the checkbox using the for attribute, matching the checkbox's id. This makes the label clickable, toggling the checkbox state when clicked. The clickable label means the checkbox gets on/off when t 1 min read How to create an HTML checkbox with a clickable label? To create an HTML checkbox with a clickable label, use the <label> element and associate it with the checkbox using the for attribute, matching the checkbox's id. This makes the label clickable, toggling the checkbox state when clicked. The clickable label means the checkbox gets on/off when t 1 min read How to create an HTML checkbox with a clickable label? To create an HTML checkbox with a clickable label, use the <label> element and associate it with the checkbox using the for attribute, matching the checkbox's id. This makes the label clickable, toggling the checkbox state when clicked. The clickable label means the checkbox gets on/off when t 1 min read How to Show and Hide div elements using Checkboxes ? In order to display data/content of a specific element by selecting the particular checkbox in jQuery we can use the toggle() method. The toggle() method is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements. Syntax: $(selector).toggle(spe 4 min read How to Show and Hide div elements using Checkboxes ? In order to display data/content of a specific element by selecting the particular checkbox in jQuery we can use the toggle() method. The toggle() method is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements. Syntax: $(selector).toggle(spe 4 min read How to Show and Hide div elements using Checkboxes ? In order to display data/content of a specific element by selecting the particular checkbox in jQuery we can use the toggle() method. The toggle() method is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements. Syntax: $(selector).toggle(spe 4 min read Like