Skip to content

Instantly share code, notes, and snippets.

Created June 16, 2017 03:24
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Custom Round Checkbox
<div class="container">
<div class="round">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
.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;
Copy link

jaymoh commented Oct 11, 2018

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

Copy link

qqilihq commented Dec 12, 2018


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