输入:选中不作用于标签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>

​