.checkbox {
display: block;
position: relative;
padding-left: 24px;
margin-bottom: 6px;
cursor: pointer;
}
.checkbox:hover input + .checkbox-mark {
background-color: #f3f3f3;
}
.checkbox input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.checkbox input:checked + .checkbox-mark:after {
display: block;
}
.checkbox .checkbox-mark {
position: absolute;
top: 3px;
left: 0;
height: 12px;
width: 12px;
border: 1px solid #333;
background: #fff;
}
.checkbox .checkbox-mark:after {
content: "";
position: absolute;
display: none;
left: 2px;
top: -2px;
width: 6px;
height: 10px;
border: solid #333;
border-width: 0 3px 3px 0;
transform: rotate(45deg); /* add prefix if need */
}
.checkbox {
display: block;
position: relative;
padding-left: 32px;
margin-bottom: 12px;
cursor: pointer;
&:hover {
input {
& ~ .checkbox-mark {
background-color: #f3f3f3;
}
}
}
input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
&:checked {
& ~ .checkbox-mark {
&:after {
display: block;
}
}
};
}
.checkbox-mark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border: 1px solid #333;
border-radius: 2px;
&:after {
content: "";
position: absolute;
display: none;
left: 6px;
top: 2px;
width: 7px;
height: 12px;
border: solid #333;
border-width: 0 3px 3px 0;
transform: rotate(45deg); /* add prefix if need */
}
}
}