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;
}
input[type=checkbox] {
display: none;
}
input:checked + label:before {
content: "✓ ";
}
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