HTML and CSS code to create a custom checkmark input. Easy to customize.
<label class="custom-checkmark">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
.custom-checkmark {
display: block;
position: relative;
padding-left: 35px;
margin: 2rem 0;
cursor: pointer;
user-select: none;
font-size: 22px;
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Style the checkmark/indicator */
.checkmark {
&::after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
}
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
&::after {
content: "";
position: absolute;
display: none;
}
}
/* On mouse-over, add a grey background color */
.custom-checkmark:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.custom-checkmark input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Show the checkmark when checked */
.custom-checkmark input:checked ~ .checkmark:after {
display: block;
}
Code based on this article by W3 Schools.