Skip to content

Instantly share code, notes, and snippets.

@ericorruption
Created January 18, 2016 12:53
Show Gist options
  • Save ericorruption/34ce9d1a5b629c1953b0 to your computer and use it in GitHub Desktop.
Save ericorruption/34ce9d1a5b629c1953b0 to your computer and use it in GitHub Desktop.
simple custom checkboxes / radios (ie9+)
input[type=checkbox] {display: none;}
input[type=checkbox] + label:before {
content: "";
border: 1px solid #000;
font-size: 11px;
line-height: 10px;
margin: 0 5px 0 0;
height: 10px;
width: 10px;
text-align: center;
vertical-align: middle;
}
input[type=checkbox]:checked + label:before {
content: "\2713";
color: transparent;
transition: color ease .3s;
}
input[type=checkbox]:checked + label:before {
color: #000;
}
input[type=radio] + label:before {
content: "\26AB";
border: 1px solid #000;
border-radius: 50%;
font-size: 0;
transition: font-size ease .3s;
}
input[type=radio]:checked + label:before {
font-size: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment