Skip to content

Instantly share code, notes, and snippets.

@jjmss

jjmss/styled-checkboxes.css

Created September 1, 2022 08:08
Show Gist options
  • Save jjmss/0645a580967ad9baeb4d459e3e1c2752 to your computer and use it in GitHub Desktop.
Save jjmss/0645a580967ad9baeb4d459e3e1c2752 to your computer and use it in GitHub Desktop.
Download ZIP
Styles checkboces
Raw
styled-checkboxes.css
[type="checkbox"]:not(:checked),[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,[type="checkbox"]:checked + label {
position: relative;
padding-left: 2.5em !important;
cursor: pointer;
}
[type="checkbox"] + label {
padding-bottom: 2.5px !important;
padding-top: 2.5px !important;
}
[type="checkbox"]:not(:checked) + label:before,[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1.75em;
height: 1.75em;
border: 2px solid #ccc;
background: #fff;
border-radius: 4px;
}
[type="checkbox"]:not(:checked) + label:after,[type="checkbox"]:checked + label:after {
content: '\f00c';
position: absolute;
top: .4em;
left: 0.4em;
font-size: 1em;
line-height: 1;
color: black;
transition: all .2s;
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
[type="checkbox"]:checked + label:before {
border-color: #334C63;
}
[type="checkbox"]:disabled:not(:checked) + label:before,[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #ccc;
background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
color: #999;
}
[type="checkbox"]:disabled + label {
color: #aaa;
}
[type="checkbox"]:checked:focus + label:before,[type="checkbox"]:not(:checked):focus + label:before {
border: 2px dotted #334c63;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment