Beautiful Checkbox with Auto-count Checkboxes Checked

Written by @kerixa 9 March 2021

In cases where we want the site user to fill out a form or select the desired options in the purchase panel, we can use checkboxes. Giving a special and beautiful style to these checkboxes will increase the beauty of the website. The following code provides a beautiful style for HTML checkboxes, while automatically counts the number of checkboxes checked.

Code Snippet:

                                                <!-- this script is provided by coded by: Kerixa Inc. -->
input:checked {
     counter-increment: total;
 output::before {
     content: counter(total);
/* checkboxes don't scale up in size very well in all browsers, so we'll hide them in an accessible way... */
 input {
     position: absolute;
     width: 1px;
     clip: rect(0 0 0 0);
     overflow: hidden;
     white-space: nowrap;
/* ...and style every <label> to look like a checkbox... */
 label {
     display: grid;
     place-items: center;
     width: 50px;
     height: 50px;
     background-color: #fff;
     overflow: hidden;
/* ...and add in a focus style to keep things accessible... */
 input:focus + label {
     outline: 2px solid #406f99;
/* ...and add a checkmark into <label> via ::before whenever its actual (hidden) checkbox is checked */
 input:checked + label::before {
     content: '✔';
/* everything below is for demo appearances and not important to the concept */
 body {
     box-sizing: border-box;
     display: grid;
     place-items: center;
     min-height: 100vh;
     margin: 0;
     padding: 20px;
     color: #406f99;
     background-color: #cbd9e6;
     font: 700 2.5rem/1 'Fira Mono', monospace;
 .wrapper {
     display: flex;
     justify-content: space-between;
     width: 100%;
     max-width: 500px;
 span, output {
     height: 50px;
     line-height: 50px;
<link href="" rel="stylesheet">
<div class="wrapper">
  <input id="c1" type="checkbox"><label for="c1"></label>
  <input id="c2" type="checkbox" checked><label for="c2"></label>
  <input id="c3" type="checkbox" checked><label for="c3"></label>
  <input id="c4" type="checkbox"><label for="c4"></label>
  <input id="c5" type="checkbox"><label for="c5"></label>
<a target='_blank' href='' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>                                                


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!



Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

Online Users: 12
Recent Members: carfaoui, Ali7hry, alexnicola, Adam20, Prashanthcs11
advertisement 2