Skip to content

Instantly share code, notes, and snippets.

Created March 17, 2017 04:26
What would you like to do?
<input type="checkbox" />
input[type=checkbox] {
position: relative;
cursor: pointer;
box-sizing: border-box
display: inline;
top: 0;
/*margin-left: -25px;*/
margin-right: 5px;
padding: 0;
width: 15px;
height: 15px;
border: none;
border-radius: 0;
background: transparent;
-moz-appearance: checkbox;
-webkit-appearance: checkbox
input[type=checkbox]:focus {
border: 1px solid #ec482e
input[type=checkbox]:before {
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
content: "";
position: absolute;
top: -1px;
left: -1px;
z-index: 1;
width: 18px;
height: 18px;
border: 2px solid #555;
box-sizing: border-box
input[type=checkbox]:checked:before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
height: 9px;
border-color: #ec482e;
border-top-style: none;
border-right-style: none
input[type=checkbox]:focus:before {
border-color: #ec482e
input[type=checkbox]:after {
content: "";
position: absolute;
top: -4px;
left: -4px;
width: 24px;
height: 24px;
background: #000;
cursor: pointer;
box-sizing: border-box
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment