Checkbox input can't be unchecked in mobile view on chrome

Question

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>

It seems too simple, but the checkbox has a `display: none`, it is normal that it is not visible ... — bpardo, Sep 24 '21 at 09:46

score 0 · Answer 1 · answered Sep 24 '21 at 09:49

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.

score 0 · Accepted Answer · answered Sep 24 '21 at 09:53

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

score 0 · Answer 3 · answered Sep 24 '21 at 10:06

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>

Checkbox input can't be unchecked in mobile view on chrome

3 Answers3