Skip to main content
3 de 3
añadir código para esconder checkbox
Black Sheep
  • 13.6k
  • 9
  • 38
  • 62

Para cambiar el color del label

.checkBoxLabel {
  width: 200px;
  padding: 10px 0;
  background-color:#c9c9c9;
  border-radius:5px;  
  cursor:pointer;
  text-align: center;
  display: inline-block;
}

.checkBox:checked + .checkBoxLabel {
  background-color: pink;
  color: #fff;
}

div {
  margin-top: 40px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<div>
  <input type="checkbox" id="check" class="checkBox">
  <label for="check" class="checkBoxLabel">My Label</label>
</div>

Update:

Para esconder el checkbox al seleccionar label puedes usar un poco de jQuery:

$('.checkBoxLabel').click(function(){
  
  var checkbox = $('#check');
  
  if ( checkbox.css('visibility') == 'hidden' ) {
    
    checkbox.css('visibility','visible');
    
  } else {
    
    checkbox.css('visibility','hidden');
  }
});
.checkBoxLabel {
  width: 200px;
  padding: 10px 0;
  background-color:#c9c9c9;
  border-radius:5px;
  cursor:pointer;
  text-align: center;
  display: inline-block;
}

.checkBox:checked + .checkBoxLabel {
  background-color: pink;
  color: #fff;
}

div {
  margin-top: 40px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="check" class="checkBox">
  <label for="check" class="checkBoxLabel">My Label</label>
</div>

Black Sheep
  • 13.6k
  • 9
  • 38
  • 62