Once I check the checkmark box I am not able to uncheck it when I am on mobile view in chrome and when I change to desktop the checkmark does not even stay and I am not able to check the box at all.
What am I missing?
Code :
input[type=checkbox] {
display: none;
}
#following {
font-family: "Comic Sans MS", "Comic Sans", cursiveic;
text-align: center;
display: inline-block;
color: black;
cursor: pointer;
position: relative;
padding-left: 30px;
margin: -10px 10px;
top: -10px;
font-size: 15px;
}
label:before {
line-height: 20px;
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
position: absolute;
left: 10px;
top: 5px;
border: 1px solid black;
}
input[type=checkbox]:checked + label:before,
label:hover:before {
content: "\2713";
font-size: 22px;
color: black;
line-height: 7px;
} <div>
<input type="checkbox" name="check">
<label id="following" for="check">Following</label>
</div> Add an id attribute to your checkbox. Label for will only work with input id
<div>
<input type="checkbox" name="check" id="check">
<label id="following" for="check">Following</label>
</div>
Remove label:hover:before from css. Otherwise it will not uncheck on click in mobile view
input[type=checkbox]:checked + label:before{
content: "\2713";
font-size: 22px;
color: black;
line-height: 7px;
}