Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Styling Checkboxes Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .custom-checkbox { width: 20px; height: 20px; background-color: #ccc; display: inline-block; position: relative; } .custom-checkbox.checked { background-color: #4caf50; } </style> <script> $(document).ready(function(){ $(".custom-checkbox").click(function(){ $(this).toggleClass("checked"); }); }); </script> </head> <body> <div class="custom-checkbox"></div> Custom Checkbox<br> <div class="custom-checkbox"></div> Custom Checkbox<br> <div class="custom-checkbox"></div> Custom Checkbox<br> </body> </html>
console output