Styling Checkbox: History that I know; Evolution of my knowledge
Tags: tutorial, beginners, codenewbie, webdev
Published: 2019-06-07 14:01:25

# My beginning

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

```html
<!-- HTML Code -->

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

```css
/* CSS Code */

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

<p>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?".</p>

---

# Searching for the solution

<p>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.</p>

### The solution

<p>Here is how I remember, how I should do it.</p>

<p>First, let's get our resources.</p>

![](https://thepracticaldev.s3.amazonaws.com/i/ofzi8e5l9xo6x2pfn66t.png)

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

<p>Download <a name="http://jquery.com/">jQuery</a>. I think using the latest jQuery is fine. There is a difference in performance, but the source code is just the same.</p>

### The source code

```html
<!-- HTML Code -->

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

```css
/* 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
// 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

{% codepen https://codepen.io/takaneichinose/pen/qGzPde %}

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

---

# After learning

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

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

### Solution number 2

#### Pure CSS approach

<p>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.</p>

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

### The source code

```html
<!-- HTML Code -->

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

```css
/* 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

{% codepen https://codepen.io/takaneichinose/pen/argGrP %}

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

---

# Another learning and practising

<p>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.</p>

<p>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.</p>

### Solution number 3

#### Pure CSS and no resources approach

<p>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.</p>

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

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

### The source code

```html
<!-- HTML Code -->

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

```css
/* 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

{% codepen https://codepen.io/takaneichinose/pen/MdMqNV %}

<p>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.</p>

---

<p>I hope you liked my little story. Thank you for reading.</p>

---

# Conclusion

<p>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.</p>

---

# Disclaimer

<p>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.</p>