While custom styling a checkbox, I'm facing an issue where the label next to it keeps shifting. When unchecked, it aligns itself at the bottom of the box, but upon checking, it moves to center align with the box.
.check {
width: 100%;
font-weight: normal;
margin-bottom: 0px;
}
.check label {
content: " ";
width: 18px;
height: 18px;
border: 1px solid #dae2e6;
margin-right: 10px;
display: inline-block;
}
.check label::after {
font-size: 13px;
color: #8e989f;
}
.check input[type="checkbox"]:checked + label::after {
font-family: "Material Icons";
content: "\e5ca";
}
.check input[type="checkbox"] {
left: -9999px;
position: absolute;
}
.check input[type="checkbox"]:checked + label + div {
display: inline-block;
}
<label class="check">
<input type="checkbox" value="mandatory" name="checkbox1" id="check3">
<label for="check3"> </label>
Mark as Mandatory
</label>