can't trigger the customized checkbox when the box is ticked

byMR

May 27, 2022

When i click the checkbox nothing happens.

I’m trying to remove the input checkbox and replace it with a customized one .

But when i trigger span , when the box is ticked , nothing happens.

Could anyone tell me why why is this command not executing ?

[type=checkbox]:checked + span:after […]

.preferences{
        height: 103px;
        width: 491px;
        box-shadow: 0px 12px 18px -6px rgba(5, 5, 5, 0.3);
        font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
}

        input{
            display: none; /* Hide the default checkbox */
          }
          
          /* Style the artificial checkbox */
          span{
            height: 15px;
            width: 15px;
            border: 1px solid grey;
            display: inline-block;
            position: relative;
          }
          
          /* Style its checked state...with a ticked icon */
          [type=checkbox]:checked + span:after {
            content: '\2714';
            position: absolute;
            top: -5px;
            left: 0;
          }
    }

<div class="preferences">
                  <h2>I prefer</h2>


                  
               <label for="prefer-email">
                    <input type="checkbox">
                          <span></span>
                   Send me an email
               </label>
    
               <label for="prefer-call">
                   <input type='checkbox'>
                       <span></span>
                  Call me
               </label>

            </div>

>Solution :

Your labels have a for attribute but your inputs do not have a matching id. This is required to get them to work together. See the link below for a more in depth explanation.

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for

Here is a working version of your code:

.preferences {
  height: 103px;
  width: 491px;
  box-shadow: 0px 12px 18px -6px rgba(5, 5, 5, 0.3);
  font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
input {
  display: none;
}
span {
  height: 15px;
  width: 15px;
  border: 1px solid grey;
  display: inline-block;
  position: relative;
}
[type=checkbox]:checked + span:after {
  content: '\2714';
  position: absolute;
  top: -5px;
  left: 0;
}

<div class="preferences">
<h2>I prefer</h2>
<label for="prefer-email">
<input id="prefer-email" type="checkbox">
<span></span>Send me an email
</label>

<label for="prefer-call">
<input id="prefer-call" type='checkbox'>
<span></span>Call me
</label>
</div>