Create a Custom Checkbox using HTML CSS and JavaScript Last Updated : 28 Apr, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report This article will show you how to create a custom checkbox using HTML, CSS, and JavaScript that enables users to check on checkboxes along with the " Select all " feature. We have written a code that generates a card in the center of the window. The card displays a list of items along with checkboxes which allow the user to select items either randomly or with the "select all" feature. PreviewApproachFirst create an HTML card, including the list of items with checkboxes and a "select all" item for selecting all items.Design the card with CSS to make the better design of the card with CSS properties.In javascript implement the function selectAllCheckboxes, unselectAllCheckboxes, initializeCustomCheckboxes, and updateCustomCheckbox.Ensure DOMContentLoaded event listener ensures all these functions are initialized when the page loads, allowing for smooth interaction with the custom checkboxes.Example: In this example, we will implement a custom checkbox where users can check all lists either manually or select all. JavaScript function initializeCustomCheckboxes() { const checkboxes = document.querySelectorAll(".box input"); checkboxes.forEach((checkbox) => { checkbox.addEventListener("change", updateCustomCheckbox); }); } function updateCustomCheckbox(event) { const checkbox = event.target; const customCheckboxBox = checkbox.parentElement.querySelector(".check_box"); if (checkbox.checked) { customCheckboxBox.classList.add("active"); } else { customCheckboxBox.classList.remove("active"); } } function initializeSelectAll() { const selectAllCheckbox = document.querySelector(".select_all"); const selectAllCustomCheckboxBox = document.querySelector( ".select_all_box .check_box" ); selectAllCheckbox.addEventListener("change", () => { if (selectAllCheckbox.checked) { selectAllCustomCheckboxBox.classList.add("active"); selectAllCheckboxes(); } else { selectAllCustomCheckboxBox.classList.remove("active"); unselectAllCheckboxes(); } }); } function selectAllCheckboxes() { const checkboxes = document.querySelectorAll(".box input"); checkboxes.forEach((checkbox, index) => { setTimeout(() => { checkbox.checked = true; updateCustomCheckbox({ target: checkbox }); }, index * 100); }); } function unselectAllCheckboxes() { const checkboxes = document.querySelectorAll(".box input"); checkboxes.forEach((checkbox, index) => { setTimeout(() => { checkbox.checked = false; updateCustomCheckbox({ target: checkbox }); }, index * 100); }); } // Initialize everything when the page loads document.addEventListener("DOMContentLoaded", () => { initializeCustomCheckboxes(); initializeSelectAll(); }); HTML <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Custom Checkbox Design using HTML CSS and JavaScript </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h2>Select Your Programming Language</h2> <label class="select_all_box"> <input type="checkbox" value="Select All" class="select_all"> <div class="check_box"> <div class="custome_check"> <div class="line1"></div> <div class="line2"></div> </div> </div> <p>Select All</p> </label> <label class="box"> <input type="checkbox" value="Mango"> <div class="check_box"> <div class="custome_check"> <div class="line1"></div> <div class="line2"></div> </div> </div> <p>JAVASCRIPT</p> </label> <label class="box"> <input type="checkbox" value="Mango"> <div class="check_box"> <div class="custome_check"> <div class="line1"></div> <div class="line2"></div> </div> </div> <p>C ++</p> </label> <label class="box"> <input type="checkbox" value="Mango"> <div class="check_box"> <div class="custome_check"> <div class="line1"></div> <div class="line2"></div> </div> </div> <p>JAVA</p> </label> <label class="box"> <input type="checkbox" value="Orange"> <div class="check_box"> <div class="custome_check"> <div class="line1"></div> <div class="line2"></div> </div> </div> <p>PYTHON</p> </label> <div class="checkbox_value"></div> </div> <script src="script.js"></script> </body> </html> CSS /* style.css */ * { padding: 0px; margin: 0px; font-family: sans-serif; } body { width: 100%; height: 100vh; background-color: #eee; display: flex; align-items: center; justify-content: center; } .container { width: 500px; background-color: #fff; padding: 15px; border-radius: 15px; box-shadow: 0px 0px 20px 0px grey; } .container h2 { text-align: center; font-size: 25px; margin-top: 20px; margin-bottom: 40px; } .container label { display: flex; align-items: center; margin: 15px 0px; padding: 15px; border-radius: 5px; cursor: pointer; transition: 0.2s; } .container label:hover { background-color: #c5cae9; } input[type="checkbox"] { display: none; } label .check_box { width: 25px; height: 25px; background-color: #f2f2f2; border-radius: 5px; } label .check_box .custome_check { width: 25px; height: 15px; left: 3px; rotate: -45deg; position: relative; } label .check_box .custome_check .line1 { position: absolute; height: 0%; width: 5px; background-color: #1e88e5; border-radius: 100px; transition: 0.1s; transition-delay: 0.1s; } label .active .custome_check .line1 { height: 100%; transition: 0.1s; } label .check_box .custome_check .line2 { position: absolute; height: 5px; width: 0%; bottom: 0px; background-color: #1e88e5; border-radius: 100px; transition: 0.1s; } label .active .custome_check .line2 { width: 100%; transition: 0.1s; transition-delay: 0.1s; } label p { margin-left: 15px; font-size: 25px; } .container .checkbox_value p { font-size: 20px; background-color: #f2f2f2; padding: 5px 15px; display: inline-block; border-radius: 50px; margin: 5px; } Output: Create a Custom Checkbox using HTML CSS and JavaScript Comment More infoAdvertise with us Next Article How to Create a Select All Checkbox in JavaScript ? S saurabhkumarsharma05 Follow Improve Article Tags : JavaScript JavaScript-Projects Geeks Premier League 2023 Similar Reads How to create Popup Box using HTML CSS and JavaScript? Creating a popup box with HTML, CSS, and JavaScript improves user interaction on a website. A responsive popup appears when a button is clicked, featuring an HTML structure, CSS for styling, and JavaScript functions to manage visibility.ApproachCreate the Popup structure using HTML tags, Some tags a 3 min read How to Create a Chips Component using HTML CSS & JavaScript ? In this article, we will see how we can create a chip component with the help of HTML, CSS, and JavaScript. In a chip component, there are basically two sections: one is the content section, and the other is the cross-button section. Both should be under one container with a proper border-radius. Pr 3 min read How to Create a Select All Checkbox in JavaScript ? In web apps with lots of checkboxes, a "Select All" checkbox is useful. It lets users check or uncheck all checkboxes at once, making things quicker. This feature can be implemented in various ways, such as utilizing JavaScript and JQuery to incorporate a "Select All" checkbox. This enhances the app 2 min read How to strike through text when checking a Checkbox using HTML CSS and JavaScript ? In this article, we will learn how to apply strikethrough to a paragraph text when a checkbox is selected using HTML, CSS, and JavaScript. This is an interactive user-friendly effect and can be used on any web page. Here, we have included a code that simply creates a card with a checkbox, when you c 2 min read How to Create a Checkbox in HTML? The checkbox is the HTML form element that lets users select one or more options from predefined choices. It can often be used when a user selects multiple items in the list. Checkboxes can be checked or unchecked, and they are created using the <input> tag with the type attributes set to the 3 min read How to style a checkbox using CSS ? Styling a checkbox using CSS involves customizing its appearance beyond the default browser styles. This can include changing the size, color, background, and border, and adding custom icons or animations. Techniques often involve hiding the default checkbox and styling a label or pseudo-elements fo 3 min read Like