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
Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.
