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>