You have seen that default checkbox, but that's not looking much attractive. In this article, I'll show you how you can create custom checkbox using html css and Javascript. In previous blog post, I have shown you how you can get the value of multiple checkboxes.
In this blog post I show you how you can design custom round checkboxes with HTML, CSS, and JavaScript. With this guide, you'll be able to create beautiful and functional round checkboxes and it will also help to create checkbox like radio button.
How we going to customize checkbox?
So, we are not going to customize checkbox, we just bind the checkbox and div tag by label tag. we going to style that div tag as checkbox. and set the main checkbox to display: none.
As the checkbox and div tag is bound by label tag. So, when click on label, checkbox reacts (or its state changes). According to the state of checkbox we'll change the styling of div tag accordingly using JavaScript.
Video Tutorial Of Custom Rounded Checkboxes.
Custom Circular Checkbox.
- Create one folder.
- Open it in your code editor.
- Create two files in that folder with named index.html and index.css.
Step 1: Create a basic design.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom circular checkboxes | maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
<label for="first" class="label">
<input type="checkbox" value="HTML" id="first" class="checkbox">
<!-- div for custom checkbox -->
<div class="circle_checkbox"></div>
<p>HTML</p>
</label>
<label for="second" class="label">
<input type="checkbox" value="CSS" id="second" class="checkbox">
<!-- div for custom checkbox -->
<div class="circle_checkbox"></div>
<p>CSS</p>
</label>
<label for="third" class="label">
<input type="checkbox" value="JAVASCRIPT" id="third" class="checkbox">
<!-- div for custom checkbox -->
<div class="circle_checkbox"></div>
<p>JAVASCRIPT</p>
</label>
<label for="fourth" class="label">
<input type="checkbox" value="PHP" id="fourth" class="checkbox">
<!-- div for custom checkbox -->
<div class="circle_checkbox"></div>
<p>PHP</p>
</label>
</div>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100vh;
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 450px;
}
.box {
width: 100%;
background-color: #000;
color: #fff;
padding: 15px;
border-radius: 5px;
}
.box .label {
display: flex;
align-items: center;
margin: 20px 10px;
}
/* ---------- Default checkbox ---------- */
.label input[type="checkbox"] {
display: none;
}
/* ---------- Custom checkbox ---------- */
.label .circle_checkbox {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid #fff;
background-color: transparent;
position: relative;
}
.label p {
font-size: 30px;
margin-left: 20px;
cursor: pointer;
}
/* ---------- Check mark ---------- */
.custom_check {
width: 12px;
height: 25px;
border-right: 5px solid green;
border-bottom: 5px solid green;
rotate: 45deg;
top: -5px;
left: 12px;
position: absolute;
}
Output :
As you can see in above image a basic design is ready. You can see a circle beside a default checkbox. That's a div tag which we here refere as a custom checkbox.
We'll change its styling according to its default checkbox. Making it look like a custom checkbox.
When its checkbox is selected we'll make it background color to white and add one check mark through JavaScript, And when its checkbox uncheck we'll remove the check mark and make the background color to transparent.
That's why a custom_check class was created inside CSS for making an check mark. Later we'll add this class inside a element for checkmark formation. And that element we'll add inside a circle_checkbox for displaying checkmark when its checkbox is selected.
So let's add this functionality using JavaScript.
Step 2: Add custom checkbox functionality.
As their is a multiple checkboxes we'll use foreach method of JavaScript.
We'll add onclick event on each label and check for its input checkbox state.
If its selected we'll add background color white to its div tag (class="circle_checkbox") (div which is present in label tag which is clicked) and also add one element (span tag) with class="custom_check" for checkmark. You can add img tag also with image.
If its unselected or unchecked we'll make background color transparent and remove or clear the innerHTML of div (class="circle_checkbox") for removing the check mark.
By doing this a div tag (class="circle_checkbox") act as checkbox.
JavaScript
let label = document.querySelectorAll(".label");
label.forEach((item, index) => {
let checkbox = item.querySelector(".checkbox");
let circle_checkbox = item.querySelector(".circle_checkbox");
item.onclick = function () {
if (checkbox.checked) {
circle_checkbox.style.backgroundColor = "#fff";
circle_checkbox.innerHTML = '<span class="custom_check"></span>';
} else {
circle_checkbox.style.backgroundColor = "transparent";
circle_checkbox.innerHTML = '';
}
}
});
Output:
As you can see the div (class="circle_checkbox") is look like a designed checkbox and change styles according to its default checkbox. The default checkbox of option HTML, CSS, JAVASCRIPT is selected, so its div tag(class="circle_checkbox") styles are changed looks like custom checkboxes. You can design it your way by understanding the concept.
So as div tag (class="circle_checkbox") is act according to its default checkbox. So let's hide the default checkbox.
Step 3: Hide the default checkbox.
To hide we'll use CSS property display: none;
Output:
You may like:
- How to create a custom circular checkboxes with only HTML and CSS.
- How to create animated checkbox using HTML, CSS & JavaScript.
- How to create check mark animation using HTML, CSS & JavaScript.
- How to get the value of selected checkboxes using JavaScript.
- How to create custom animated radio button (square shape) using HTML & CSS.
Final code:
So that's how you can create custom circular checkbox using HTML, CSS and JavaScript. If you have any query or suggestion feel free to write them in the comment section.
Share your thoughts.