Skip to content

Instantly share code, notes, and snippets.

@karkranikhil

karkranikhil/Round checkbox

Created July 3, 2015 13:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save karkranikhil/94709e2de5cb17a8b624 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save karkranikhil/94709e2de5cb17a8b624 to your computer and use it in GitHub Desktop.
Download ZIP
Round checkbox
Raw
Round checkbox
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pure CSS - Custom styled radio- and checkboxes</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.min.css">
<style>
.Form-label--tick {
display: block;
}
.Form-label--tick {
position: relative;
display: inline-block;
margin-left: 1em;
}
.Form-label-checkbox {
position: absolute;
z-index: -1;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
}
.Form-label-checkbox + .Form-label-text {
cursor: pointer;
margin-right: 1em;
}
.Form-label-checkbox + .Form-label-text::before {
font-size: .875em;
display: inline-block;
width: 1.75em;
height: 1.75em;
line-height: 1.5;
border-radius:25px;
margin-right: .25em;
content: "\00a0";
color: black;
background-clip: padding-box;
background-color: white;
text-align: center;
}
.Form-label-checkbox:checked + .Form-label-text::before {
background-color: white;
border-color: white;
box-shadow: 0 0 0 0 white;
font-family: FontAwesome;
content: "\f00c";
}
</style>
</head>
<body>
<div>
<label class="Form-label--tick">
<input type="checkbox" value="1" name="SomeCheckbox" class="Form-label-checkbox">
<span class="Form-label-text">Icecream</span>
</label>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment