输入：检查未作用于标签 CSS答案

【问题标题】：input:checked not acting on a label CSS输入：检查未作用于标签 CSS
【发布时间】：2021-03-13 14:10:05
【问题描述】：

我是新手，我尝试了解复选框的工作原理，我尝试制作一个选中时为彩色的 Heart 复选框，并且我用选中的心覆盖空心，但它不起作用...

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

提前谢谢你

我将代码放在 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>

【问题讨论】：

标签： html css checkbox

【解决方案1】：

你犯了一个小错误：

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

必须

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

这是一个有效的 sn-p：

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>

【讨论】：

非常感谢，这就是问题所在！我在 MDN 中没有找到 ~ 而不是 + 的定义...但目前它正在工作！

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

希望对你有帮助:) 谢谢

【讨论】：