Styling Checkbox: History that I know; Evolution of my knowledge

My beginning

Few years ago, when I was still a beginner in programming, and I haven't yet learned of transform keyword, &:checked pseudo-class, and + or ~ selectors yet, I tried to style a checkbox like these lines of codes below:

<!-- HTML Code -->

<input type="checkbox" class="checkbox">

/* CSS Code */

.checkbox {
  color: black;
  background-color: white;
  border: solid 5px black;
  width: 100px;
  height: 100px;
}

The sizing works, but the other attributes doesn't. I was surprised that time, and I was like: "I can easily style the text box, and select box, but I can't style the checkbox. What should I do?".

---

Searching for the solution

When I tried to search for a solution on a popular search engine, I found an interesting tutorial; using images, and jQuery to do the trick.

The solution

Here is how I remember, how I should do it.

First, let's get our resources.

Yes, in those days, we really relied on image sprites, because CSS was not that powerful enough to perform these things.

Download jQuery. I think using the latest jQuery is fine. There is a difference in performance, but the source code is just the same.

The source code

<!-- HTML Code -->

<label class="label">
  <input type="checkbox" class="checkbox"/>
</label>

/* CSS Code */

.label {
  background-image: url(https://your-image-link-here.example.com);
  width: 100px;
  height: 100px;
  display: inline-block;
}

.label input[type="checkbox"] {
  display: none;
}

// Javascript Code

$(document).ready(function () {
  $('.checkbox').change(function () {
    if ($(this).prop('checked')) {
      $(this).parent().css('background-position', '100px 0px');
    }
    else {
      $(this).parent().css('background-position', '0px 0px');
    }
  });
});

Result

The looks turned out to be well, but I don't know, performance-wise.

---

After learning

After I started to learn the existing newer technology, I found out that there is a better solution to solve this little problem.

After reading many articles (or tutorials), practising too many times, I found out that images are not necessary to style the checkbox.

Solution number 2

Pure CSS approach

Although this is not yet the best approach that I learned, at least I don't need to use Javascript (jQuery) anymore, to do the checkbox styling.

All we had to do is to play with CSS, and use &:checked pseudo-class, and + or ~ selectors, then we can get somehow same result.

The source code

<!-- HTML Code -->

<label class="label">
  <input class="checkbox" type="checkbox"/>
  <span></span>
</label>

/* CSS Code */

.label {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.label input[type="checkbox"] {
  display: none;
}

.label input[type="checkbox"]:checked ~ span {
  background-position: 100px 0px;
}

.label span {
  background-image: url(https://your-image-link-here.example.com);
  width: 100%;
  height: 100%;
  display: block;
}

Result

This one also turned out to be well, but I don't want to use image anymore.

---

Another learning and practising

Still, dissatisfied with the previous solution (Because I do not want to use image just to do these), I waited for newer technology, and then, tried to research for a better solution.

Many people also uses this solution, so I think I am going to stick here for a while. This I think the "modern" way of styling checkboxes.

Solution number 3

Pure CSS and no resources approach

Yes, we don't need to use another resources such as images anymore. All we need is CSS and nothing else, to do the job.

First of all, for we to get the "check image", we just have to prepare the span tag, and shape it into your preference, then use transform: rotate(<x>deg) to get the "check image" illusion.

Then, same as solution number 2, we just have to get the adjacent or sibling element to set the display of that span tag.

The source code

<!-- HTML Code -->

<label class="label">
  <input class="checkbox" type="checkbox"/><span></span>
</label>

/* CSS Code */

.label {
  background-color: white;
  width: 100px;
  height: 100px;
  border: solid 5px black;
  display: inline-block;
  box-sizing: border-box;
}

.label input[type="checkbox"] {
  display: none;
}

.label input[type="checkbox"]:checked + span {
  display: block;
}

.label span {
  width: 80%;
  height: 40%;
  display: none;
  border-bottom: solid 15px black;
  border-left: solid 15px black;
  box-sizing: border-box;
  transform: rotate(-45deg) translateX(-10%) translateY(55%);
}

Result

It is actually easier in my opinion. Also, it is easier to style the transition of the checkbox, compared to; if you're using images.

---

I hope you liked my little story. Thank you for reading.

---

Conclusion

Our things we heed to learn in development is really vast. There are so many things that we thought that we already knew, but in the end, there is a better one compared to what we know right now. That is why, we should not stop practising. It is important. Perhaps, this "best solution" that I know right now, there is much better solution hidden out there. Or maybe not now, but in future.

---

Disclaimer

During those times, I dont know 'Pug', 'SCSS', and 'Babel'. Those are just the default compilers I have in my Codepen, and more convenient for me.