无法在选中该复选框时触发自定义复选框

Question

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

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

但是当i触发span时，当框被选中时，什么也没发生

谁能告诉我为什么为什么这个命令不执行?

[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>

Answer 1

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

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: '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>