Label de checkbox personalizada

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}

input[type=checkbox] + label {
    color: black;
}
input[type=checkbox]:checked + label {
    background: #efefef;
}

Si queremos que solo afecte a un form determinado añadimos la clase y lo metemos todo de un div

.miEStilo label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

.miEstilo label:hover {
 background:#eee;
 cursor:pointer;
}
<div class= "miEStilo">contenido</div>

Link interesante para revisar

https://toolset.com/forums/topic/css-styling-of-checkboxes-in-views-parametric-search/

https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp

Label de checkbox personalizada Leer más »