How to Make Entire Custom Checkbox/Div Clickable ?
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