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 Chrome
- Internet Explorer
- Firefox
- Opera
- Safari