CSS: Custom checkbox

Customize your check box with your own way of styles

Hi!!! Let’s start customization on checkbox, to add some more styles to our site.

Here we goo!!!

Below you can find a sample HTML snippet for the check list for preparing yummy Burger!!!

Let’s start out CSS fun.

First things first, will arrange the basic setup with background and align the check list in proper manner with the followed css snippet

Observe the .checkbox-container, having three elements input checkbox, label and span. Here we start play with label element. If you observe the label element for attribute value is maintains same as id attribute of the input checkbox. Which is useful to enabled checkbox while we click on both input and label elements.

Get Bhanutej Kalla’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Now let’s setup the label element as checkbox with the followed snippet

Time for arrange the tick mark with the box. For that, we use the ::before pseudo class. By using the pseudo class we are going to achieve the tick mark by following code snippet.

To make invisible the tick mark we applied the opacity property as ‘0'. Once checked the checkbox, we need to make visible the tick mark by applying opacity property as ‘1’ by following snippet. And also, we need to apply the checkbox background color with simple animation.

Now, will make the invisible our basic checkbox. And will give the label with some space, check out the below snippet.

That’s it!!! Your recipe check list is available on your screen!. Hope you enjoy the post. Will catch you with some more css recipes.

Thank you!!!