Checkbox input can't be unchecked in mobile view on chrome [duplicate] - html

Question

This question already has answers here:
How to create a checkbox with a clickable label?
(12 answers)
Closed 1 year ago.
This post was edited and submitted for review 1 year ago and failed to reopen the post:
Original close reason(s) were not resolved
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>

Answer 1

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;
}

Answer 2

I tried to replicate your problem and it worked for me when I updated your html to include an id for your checkbox.
<div>
<input type="checkbox" name="check" id="check">
<label id="following" for="check">Following</label>
</div>
The for attribute targets an ID.

Answer 3

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;
}
input[type=checkbox]:not(:checked) + label:before {
content: "";
}
<div>
<input type="checkbox" id="check" name="check">
<label id="following" for="check">Following</label>
</div>