勾选复选框时无法触发自定义复选框

Question

当我点击复选框时没有任何反应。

我正在尝试删除输入复选框并将其替换为自定义复选框。

但是当我触发 span 时，当复选框被勾选时，没有任何反应。

谁能告诉我为什么这个命令没有执行？

[type=checkbox]:选中 + 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: '14';
            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>

Answer 1

您的标签具有 for 属性，但您的输入没有匹配的 id。这是让他们一起工作所必需的。请参阅下面的 link 以获得更深入的解释。

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

这是您的代码的工作版本：

.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: '14';
  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>

勾选复选框时无法触发自定义复选框

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

html

css