Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created June 16, 2017 03:24
Show Gist options
  • Save CodeMyUI/58ceada8ffaf5e2c85ccc486802eb299 to your computer and use it in GitHub Desktop.
Save CodeMyUI/58ceada8ffaf5e2c85ccc486802eb299 to your computer and use it in GitHub Desktop.
Custom Round Checkbox
<div class="container">
<div class="round">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
</div>
</div>
.round {
position: relative;
}
.round label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
top: 0;
width: 28px;
}
.round label:after {
border: 2px solid #fff;
border-top: none;
border-right: none;
content: "";
height: 6px;
left: 7px;
opacity: 0;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
.round input[type="checkbox"] {
visibility: hidden;
}
.round input[type="checkbox"]:checked + label {
background-color: #66bb6a;
border-color: #66bb6a;
}
.round input[type="checkbox"]:checked + label:after {
opacity: 1;
}
html, body {
height: 100%;
margin: 0;
}
body {
background-color: #f1f2f3;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.container {
margin: 0 auto;
}
@jaymoh
Copy link

jaymoh commented Oct 11, 2018

It doesn't work if you have more than one checkbox?

@qqilihq
Copy link

qqilihq commented Dec 12, 2018

❤️

@anandprakashweb
Copy link

anandprakashweb commented Apr 26, 2020

@jaymoh This works on multiple checkbox. You have to keep different id for different checkbox ans also change for attribute of label as per checkbox id.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment