javascript - 如果在样式标签下，则无法选中复选框

Question

我正在尝试设置复选框输入的样式。我知道因为浏览器是不可能的。所以我给 input[type=checkbox] 隐藏了可见性，并且我用 FontAwesome 图标设置了标签的样式，当输入被选中时显示正常。我的问题是，如果我将输入放在标签的相同位置，输入不会因为标签而被检查。所以我不得不将输入放在标签旁边，但这对用户来说不是什么好事。因此，如果有人对此有窍门或解决方案，那就太好了。

.log-in{
  background-color:$primary-color-opacity;
  padding: 7% 9% 7%;
  text-align: center;
  p{
    text-align:left;
  }
  input{    
    width:40%;
    height:40px;
    padding:1%;
  }
  input[type=checkbox]{
    opacity: 0;
    vertical-align: middle;
    width:20px;
    color:$error-color;
  }
  a{
    margin-top:3%;
  }
}

input[type=checkbox] + label::before {
  content: " ";
  position: absolute;
  left: 55px;
  top: 122px;
  width: 18px;
  height: 20px;
  display: block;
  background: white;
  border: none;
}

input[type=checkbox] + label::after {
  content: "\f00c";
  font-family: 'FontAwesome';
  color: $selector-color;
  position: absolute;
  left: 55px;
  top: 122px;
  width: 23px;
  height: 23px;
  display: block;
  z-index: 1;
  opacity: 0;
}

input[type=checkbox]:checked + label::after {
  opacity: 1;
}

<div class="log-in" >
  <p>Para poder participar debe aceptar las Condiciones particulares y el Plan de liquidación.</p>
  <div><input type="checkbox" ng-model="BscCtrl.conditions" ng-change="BscCtrl.checkConditions()">
  <label>Acepto las <a href="" class="color-link">Condiciones particulares</a> de la subasta</label>
  </div>
</div>

Answer 1

为您的标签提供一个 for="" 属性，该属性对应于您的复选框输入的 id="" 属性 - 这样，当标签被点击时，复选框将进行检查。

我在以下示例中使用“check1”作为值:

<div class="log-in" >
  <p>Para poder participar debe aceptar las Condiciones particulares y el Plan de liquidación.</p>
  <div>
    <input id="check1" type="checkbox" ng-model="BscCtrl.conditions" ng-change="BscCtrl.checkConditions()">
    <label for="check1">Acepto las <a href="" class="color-link">Condiciones particulares</a> de la subasta</label>
  </div>
</div>