Skip to content

Instantly share code, notes, and snippets.

@newswim
Created January 7, 2015 05:54
Show Gist options
  • Save newswim/bbd2e3adb484f72ffe90 to your computer and use it in GitHub Desktop.
Save newswim/bbd2e3adb484f72ffe90 to your computer and use it in GitHub Desktop.
/** custom checkboxes **/
input[type=checkbox].css-checkbox {
position:absolute;
z-index:-1000;
left:-1000px;
overflow:hidden;
clip:rect(0 0 0 0);
height:1px;
width:1px;
margin:-1px;
padding:0;
border:0
}
input[type=checkbox].css-checkbox + label.css-label {
padding-left:40px;
height:48px;
display:inline-block;
line-height:40px;
background-repeat:no-repeat;
background-position:0 0;
font-size:40px;
vertical-align:middle;
cursor:pointer;
background-color:#d3d3d3;
border:6px solid #fff;
box-shadow:0 0 4px 2px #C2C2C2;
transition:.8s
}
input[type=checkbox].css-checkbox:checked + label.css-label {
-background-position:0 -40px
}
label.css-label {
background-image:linear-gradient(#ea524b,#ea524b);
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
.checkbox-label {
font-size:28px;
margin-left:16px;
color:#c6c4c3
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment