CODEWITHSUNDEEP
javascripthtmlcsscheckboxlabel
David Soler
David Soler

Reputation: 229

Not able to check a checkbox if is under styled label

I'm trying to style a checkbox input. I know is impossible because of the browsers. So I've given visibility hidden to input[type=checkbox], and I've styled the label with a FontAwesome icon, that is displayed ok when the input is checked. My problem is that if I put the input in the same position of the label, the input is not getting checked because of the label. So I would have to put the input beside the label, but that's not something good for the users. So if anyone has a trick or a solution for that it would be great.

.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>

enter image description here

Upvotes: 1

Views: 1385

Answers (2)

vinayakj
vinayakj

Reputation: 5681

/* 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: "\2713";
      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>

Upvotes: 1

simmer
simmer

Reputation: 2711

Give your label a for="" attribute that corresponds to your checkbox input's id="" attribute - that way, when the label is clicked, the checkbox will be checked.

I've used "check1" as the value in the following example:

<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>

Upvotes: 2

Related Questions