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

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>

Answer 2

/* custom checkboxes CSS */
    .custom-checkmark {
      position: relative;
    }
    
    .custom-checkmark input[type=checkbox]{
      opacity:0;  
    }
    
    .custom-checkmark label {
      margin-left: 25px;
    }
    
    .custom-checkmark input[type=checkbox]:checked+label:before,.custom-checkmark input[type=checkbox]:hover+label:before {
     border-color:#369FF4;
    }
    
    .custom-checkmark input[type=checkbox]:checked+label:before {
      content: "13";
      line-height: 1.2;
    }
    
    .custom-checkmark input[type=checkbox]+label:before, .custom-checkmark input[type=radio]+label:before {
      content: "";
      display: inline-block;
      border: 1px solid #C9C9C9;
      /* font-family: 'cw-icons'; */
      background-color: #FFF;
      text-align: center;
      border-radius: 2px;
      color: #369FF4;
    }
    
    .custom-checkmark input[type=checkbox], .custom-checkmark label:before {
      position: absolute;
      width: 20px;
      height: 20px;
      left: 0;
      top: 0;
    }

<div class="custom-checkmark">
  <input id="checkbox" type="checkbox">
  <label class="checkbox-label" for="checkbox">make this a recurring monthly gift</label>
</div>

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

Not able to check a checkbox if is under styled label

html

javascript

css

checkbox

label