I've encountered some issues with customizing my checkbox. Despite trying various solutions that have worked for others, I can't seem to get it right. My goal is to have a green background color and a white check mark appear on the checkbox once it has been clicked. Below is the code snippet I have been working on, and you can find more details in the following Codepen link.
Codepen link: --> https://codepen.io/paulamourad/pen/oPpbEm
/* Custom styling for the label (the container) */
.form-check {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 0.9em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the default browser checkbox */
.form-check input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Custom design for the checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border: 2px solid #D6D4D4;
}
/* Styling for the checkmark/indicator when checked */
.form-check input:checked~.checkmark:after {
display: block;
}
/* Additional visual style for the checkmark/indicator */
.form-check .checkmark:after {
left: 2px;
top: 3px;
width: 5px;
height: 10px;
border: solid #8ABE57;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}<label class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkPeriodDays">
<span class="checkmark"></span>
<label class="form-check-label ml-2" for="checkPeriodDays">
Días
</label>
</label>