input:checked 未作用于标签 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

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 2

你犯了一个小错误：

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 3

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

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>

希望对您有所帮助:) 谢谢

input:checked 未作用于标签 CSS

input:checked not acting on a label CSS

html

css

checkbox