This blog post will guide you through the simple steps of creating custom round checkboxes using only HTML and CSS. You'll not only learn the art of custom checkbox creation, but you'll also discover how to control their visibility based on their default checkboxes state using CSS. This opens up a world of possibilities for dynamic and interactive design elements.
You’ll learn in this post how to create:
- Custom checkbox using html & css.
- Custom rounded checkbox using html & css.
- Customising the checkbox.
Custom round checkbox using HTML & CSS.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
Steps to create circular checkboxes using only HTML & CSS.
- We wrap everything in a <label> tag to easily capture clicks and control visibility.
- Inside the label, we create a <div> for the checkbox circle and a <p> for the user-friendly text it holds.
- Within the circle <div>, we use additional tags to build the checkmark itself, You can also use check mark icons and use a single <img> tag.
- Then we use CSS to customise the look and feel of both the circle and the checkmark.
- Because we're using a label, we can easily hide the default checkbox, relying on our custom one.
- The final trick? We use CSS to toggle the visibility of our custom checkbox based on the actual state of the default one.
See the below code for better understanding.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Round Checkbox | maketechstuff.com</title>
<link rel="stylesheet" href="s.css">
</head>
<body>
<div class="container">
<label>
<input type="checkbox">
<!-- Circle for custom checkbox -->
<div class="circle">
<!-- Custom checkmark -->
<!-- You can simply use image also (img tag) -->
<div class="custom_checkbox"></div>
</div>
<p>Mango</p>
</label>
<label>
<input type="checkbox">
<!-- Circle for custom checkbox -->
<div class="circle">
<!-- Custom checkmark -->
<!-- You can simply use image also (img tag) -->
<div class="custom_checkbox"></div>
</div>
<p>Banana</p>
</label>
<label>
<input type="checkbox">
<!-- Circle for custom checkbox -->
<div class="circle">
<!-- Custom checkmark -->
<!-- You can simply use image also (img tag) -->
<div class="custom_checkbox"></div>
</div>
<p>Apple</p>
</label>
<label>
<input type="checkbox">
<!-- Circle for custom checkbox -->
<div class="circle">
<!-- Custom checkmark -->
<!-- You can simply use image also (img tag) -->
<div class="custom_checkbox"></div>
</div>
<p>Grapes</p>
</label>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
position: relative;
background-color: #fafafa;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
}
label {
display: flex;
align-items: center;
margin: 25px 0px;
padding: 10px;
border-radius: 10px;
cursor: pointer;
}
label:hover {
background-color: #f2f2f2;
}
/* circle for custom round checkbox */
.circle {
width: 45px;
height: 45px;
background-color: #fff;
box-shadow: inset 0px 0px 8px -5px blue;
border-radius: 500px;
position: relative;
}
/* custom checkmark for custom checkbox */
.custom_checkbox {
position: absolute;
top: 14px;
left: 8px;
width: 22px;
height: 8px;
border-left: 6px solid blue;
border-bottom: 6px solid blue;
rotate: -45deg;
}
/* text */
label p {
font-size: 30px;
margin-left: 10px;
color: #000;
}
Output:
So heres design is ready. As you can see that default checkboxes and custom checkboxes. Now we have to show that custom checkbox checkmark only when its default chekbox is selected or marked.
So for that first let's remove all the custom checkbox markes.
And through css we going to check the default checkbox state and show the custom checkbox marks accordingly.
.
CSS
/* custom checkmark for custom checkbox */
.custom_checkbox {
position: absolute;
top: 14px;
left: 8px;
width: 22px;
height: 8px;
border-left: 6px solid blue;
border-bottom: 6px solid blue;
rotate: -45deg;
display: none;
}
input[type="checkbox"]:checked+.circle .custom_checkbox {
display: block;
}
Output:
we're using a label tag, we can hide the default checkbox (and it still functional), and relying on our custom one.
CSS
input[type="checkbox"] {
display: none;
}
Output:
The custom rounded checkbox is complete!
However, you might notice the checkmark itself isn't sporting those beautiful curves just yet, a few tweaks to the code will set it right.
While the core structure of the custom checkbox remains the same, we'll simply add two additional <div> tags inside the element with class="custom_checkbox". And by styling those tags we get the rounded checkmark.
For a clearer picture, check out the updated code below. how easily those sharp edges transform into smooth curves!
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Round Checkbox | maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<label>
<input type="checkbox">
<!-- circle for custom checkbox -->
<div class="circle" value="Mango">
<!-- custom checkbox check mark -->
<!-- You can simply use image also -->
<div class="custom_checkbox">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>
<p>Mango</p>
</label>
<label>
<input type="checkbox">
<!-- circle for custom checkbox -->
<div class="circle" value="Banana">
<!-- custom checkbox check mark -->
<!-- You can simply use image also -->
<div class="custom_checkbox">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>
<p>Banana</p>
</label>
<label>
<input type="checkbox" value="Apple">
<!-- circle for custom checkbox -->
<div class="circle">
<!-- custom checkbox check mark -->
<!-- You can simply use image also -->
<div class="custom_checkbox">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>
<p>Apple</p>
</label>
<label>
<input type="checkbox" value="Grapes">
<!-- circle for custom checkbox -->
<div class="circle">
<!-- custom checkbox check mark -->
<!-- You can simply use image also -->
<div class="custom_checkbox">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>
<p>Grapes</p>
</label>
</div>
</body>
</html>
CSS
*{
padding: 0px;
margin:0px;
}
body{
width: 100%;
height: 100vh;
position: relative;
background-color: #fafafa;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 400px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
}
label{
display: flex;
align-items: center;
margin: 25px 0px;
padding: 10px;
border-radius: 10px;
cursor: pointer;
}
label:hover{
background-color: #f2f2f2;
}
/* Circle for custom checkbox */
.circle{
width: 45px;
height: 45px;
background-color: #fff;
box-shadow: inset 0px 0px 8px -5px blue;
border-radius: 500px;
position: relative;
}
/* Checkmark custom checkbox */
.custom_checkbox{
position: absolute;
top: 12px;
left: 8px;
width: 30px;
height: 15px;
rotate: -45deg;
display: none;
}
.line1{
position: absolute;
left: 0;
width: 6px;
height: 100%;
background-color: blue;
border-radius: 100px;
}
.line2{
position: absolute;
bottom: 0;
width: 100%;
height: 6px;
background-color: blue;
border-radius: 100px;
}
/* Text */
label p{
font-size: 30px;
margin-left: 10px;
color: #000;
}
input[type="checkbox"]{
display: none;
}
input[type="checkbox"]:checked + .circle .custom_checkbox{
display: block;
}
Output:
You can add more stunning visuals with features like:
- Get checkboxes value on click.
- Select checkbox with right tick animation.
- Select and unselect all checkboxes functionality with animation one by one.
And that's it! You've now crafted a custom circular checkbox using just the power of HTML and CSS. Have any questions or suggestions? Feel free to drop them in the comments below!
Share your thoughts.