css style a checkbox
/*this creates a circle checkbox with another smaller circle
inside when checked, it looks nice ...*/
input[type='checkbox'] {
-webkit-appearance:none;
display:inline-block;
width:16px;
height:16px;
padding:0px;
margin:0px;
margin-right:5px;
background:white;
border-radius:20px;
border:1px solid #ddd;
border: 1px solid #dee2e6;
box-sizing:content-box;
line-height:16px;
vertical-align: sub;
position:relative;
}
input[type='checkbox']:checked {
border:1px solid #55468c;
}
input[type='checkbox']:checked:after{
content:'';
position: absolute;
width: 12px;
height: 12px;
border-radius: 12px;
background: #55468c;
top:50%;
transform: translateY(-50%);
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}