input:选中不作用于标签CSS

Question

我是一个新的学习者，我试图了解复选框是如何工作的，我试图制作一个选中时是彩色的心形复选框，我用选中的心形覆盖空心来做，但它不起作用。。。

输入似乎没有作用于标签。。。

提前感谢

我把代码放在Codepen上：https://codepen.io/steven-fabre/pen/KKNJdBP

input[type="checkbox"]{
display: none;
}
.heart_checked {
opacity: 0;
z-index: 999;
}
.heart_checked {
font-weight: bold;
background:  -webkit-linear-gradient(#9356dc, #FF79DA);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
label{
position: absolute;
top: 24px;
right: 24px;
font-size: 25px;
}
.fa-heart,input{
cursor: pointer;
position: absolute;
right: 24px;
}

label > input[type="checkbox"]:checked + .heart_checked {
opacity: 1;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<label>
<input type="checkbox">
<i class="far fa-heart"></i>
<i class="fas fa-heart heart_checked"></i>
</label>

Answer 1

您犯了一个小错误：

label > input[type="checkbox"]:checked + .heart_checked {
opacity: 1;
}

必须是

label > input[type="checkbox"]:checked ~ .heart_checked {
opacity: 1;
}

下面是一个工作片段：

input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.heart_checked {
opacity: 0;
z-index: 999;
}
.heart_checked {
font-weight: bold;
background: -webkit-linear-gradient(#9356dc, #FF79DA);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
label {
position: absolute;
top: 24px;
right: 24px;
font-size: 25px;
}
.fa-heart,
input {
cursor: pointer;
position: absolute;
right: 24px;
}
label>input[type="checkbox"]:checked~.heart_checked {
display: block;
opacity: 1;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<label>
<input type="checkbox">
<i class="far fa-heart"></i>
<i class="fas fa-heart heart_checked"></i>
</label>

Answer 2

input[type="checkbox"]{
display: none;
}
.heart_checked {
opacity: 0;
z-index: 999;
}
.heart_checked {
font-weight: bold;
background:  -webkit-linear-gradient(#9356dc, #FF79DA);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
label{
position: absolute;
top: 24px;
right: 24px;
font-size: 25px;
}
.fa-heart,input{
cursor: pointer;
position: absolute;
right: 24px;
}

label > input[type="checkbox"]:checked + .heart_checked {
opacity: 1;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<label>
<input type="checkbox">
<i class="fas fa-heart heart_checked"></i>
<i class="far fa-heart"></i>

</label>

Answer 3

您不需要两个不同的图标：只有在选中复选框时才填充一个。

input[type="checkbox"]{
display: none;
}
label{
position: absolute;
top: 24px;
right: 24px;
font-size: 25px;
}
.fa-heart,input{
cursor: pointer;
position: absolute;
right: 24px;
}

:checked + .fa-heart {
font-weight: bold;
background:  -webkit-linear-gradient(#9356dc, #FF79DA);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<label>
<input type="checkbox">
<i class="far fa-heart"></i>
</label>

Answer 4

[id=toggle-heart] {
position: absolute;
left: -100vw;
}
[id=toggle-heart]:checked + label {
color: #e2264d;
}
[for=toggle-heart] {
align-self: center;
color: #aab8c2;
font-size: 2em;
cursor: pointer;
}

<input id="toggle-heart" type="checkbox"/>
<label for="toggle-heart">❤</label>

希望对您有所帮助：(感谢