Skip to content

Instantly share code, notes, and snippets.

@hozefaj
Last active Feb 22, 2019
Embed
What would you like to do?
custom style checkboxes
// hide the native checkbox
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
input[type="checkbox"] + label {
display: block;
position: relative;
padding-left: 2rem;
}
// create pseudo elements that are used as checkboxes
input[type="checkbox"] + label::before {
content: '';
position: absolute;
top: 4px;
left: 0;
width: 22px;
height: 22px;
background: #fff;
}
input[type="checkbox"]:checked + label::before {
background: #6505CC;
}
input[type="checkbox"] + label::after {
content: '';
position: absolute;
top: 3px;
left: 6px;
width: 8px;
height: 16px;
border-width: 0 2px 2px 0;
border-color: #fff;
border-style: solid;
transform: rotate(38deg);
}
input[type="checkbox"]:focus + label::before {
outline: #5d9dd5 solid 1px;
box-shadow: 0 0px 8px #5e9ed6;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment