Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@jaymoh jaymoh commented Oct 11, 2018

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

@qqilihq

This comment has been minimized.

Copy link

@qqilihq qqilihq commented Dec 12, 2018

❤️

@anandprakashweb

This comment has been minimized.

Copy link

@anandprakashweb 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