How to Make Entire Custom Checkbox/Div Clickable ? Last Updated : 23 Jul, 2025 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 make the background of a div clickable in HTML ? 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 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 make the background of a div clickable in HTML ? To make the background of a <div> clickable in HTML, you can use various approaches such as wrapping the <div> in an anchor tag or using JavaScript to handle the click event. Below, we will explore these methods in detail, including syntax examples and how they work.Table of ContentUsing 2 min read How to Customized Bootstrap 5 Checkbox? Bootstrap, a widely used customizing front-end framework, streamlines web development with its pre-built CSS and JavaScript components. Bootstrap 5 Checkbox enhances interactive forms and interfaces, offering customization options for styles, sizes, and validation, facilitating user selections.There 3 min read How to enable or disable nested checkboxes in jQuery ? In this article, we will see how to enable or disable nested checkboxes in jQuery. To do that, we select all child checkboxes and add disabled attributes to them with the help of the attr() method in jQuery so that all checkboxes will be disabled. Syntax: // Select all child input of type checkbox / 2 min read Semantic-UI Checkbox Checked State Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI has a bunch of components for user interface design. One of them is “Chec 2 min read Like