Styling CheckBox - CSS Tips

Naba Kumar Brahma
Sep 6, 2018 · 3 min read

How to style checkbox without using any CSS framework.

Let’s get to the point. Here is what a normal checkbox looks like:

Default checkbox

How do we go about styling this?

HTML input-type checkboxes cannot be customized with any properties, so we have to get creative with how we customize the input element.

What ? How ?

Step 1: Hide the input element.

Step 2: Add an extra span element and apply your custom style by creating a class.

#1 — Hiding the input

There are three ways to hide a html element

  • display: none
  • visibility: hidden
  • opactity: 0

If we set display:none then any event listeners (like click listeners) on that element will not work. We need functioning event listeners because the checkbox has to toggle its state from checked to unchecked when a user clicks on it.

Similarly, the problem withvisibility:hidden is that some of the events won’t work with this property set.

Damn!

If we set opacity:0 the element will be invisible but all the event listeners will still work; therefore, this is the property we will use to achieve our customization.

CSS

With opacity:0 in place, this is how your checkbox will look:

#2 — Adding Span element

Why do we need a span element? Since we’re hiding the input checkbox and showing a custom-styled element that appears and behaves like a checkbox in its place, we use span as the placeholder element. We use span over block elements like div because it is an inline element that doesn’t take up the entire width.

Here is what our updated HTML would look like:

Let’s style the custom checkbox for unchecked state:

And again for checked state:

Now we can see our work in action:

One last thing!

Let’s incorporate some fun by adding transition animation when the state changes from unchecked to checked and vice versa.

With ripple effect:

You can find entire source code for this demo below.


If you liked this post and found it helpful, give me some claps! Please follow AppIt Ventures for other similar articles. Thanks 😄

Tech Notes: Mobile App Development | Web Development | Cloud

AppIt Ventures is a full service custom software development company that focuses on achieving your business goals through thoughtful architecture, design, and quality mobile app development. Our tech notes focus on Mobile App Development, Web Development and Cloud.

Naba Kumar Brahma

Written by

Sr Front-end Developer @Appit Ventures

Tech Notes: Mobile App Development | Web Development | Cloud

AppIt Ventures is a full service custom software development company that focuses on achieving your business goals through thoughtful architecture, design, and quality mobile app development. Our tech notes focus on Mobile App Development, Web Development and Cloud.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade