當我單擊復選框時，沒有任何反應。
我正在嘗試洗掉輸入復選框并將其替換為自定義的復選框。
但是當我觸發 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>uj5u.com熱心網友回復：
您的標簽有一個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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481791.html