Published on: 25 Jul, 2019

How to create a checkbox input with sliding effect using CSS only

Tumblr Digg Google Plus

In this tutorial, we are going to learn on how to create a checkbox input with sliding effect using CSS only. There is no javascript needed. We are going to have two background images to represent the checked and unchecked state of a checkbox.

The first thing we need to do is to write our CSS style. In order to make it unique and we do not want to target to all checkboxes presented in a web page, we are going to identify the checkboxes we want to change with a checkbox contains a CSS class named custom-checkbox.

Lets create our HTML code first. If you notice carefully, I am using a label after a checkbox. The reason why I am using a label is we need to hide the checkbox input and replace it with a background image. In order for us to be able to determine if a checkbox is checked or not checked can be represent with the label interaction of using for keyword. In the label, you will see I specify the Id inside the for keyword.

<p>This is an example of a checkbox input with unchecked state.</p>
<div><input type="checkbox" id='checkbox1' class="custom-checkbox" /> <label for="checkbox1"></label></div>
<p>This is an example of a checkbox input with checked state.</p>
<div><input type="checkbox" id='checkbox2' class="custom-checkbox" checked/> <label for="checkbox2"></label></div>

This is an example of a checkbox input with unchecked state.

This is an example of a checkbox input with checked state.

The next step is to write our CSS code. The first thing we need to do is to target a checkbox input type by using the attribute checkbox type. We then add an extra dot which represents the CSS class name. In this example, we are going to name it as custom-checkbox. We then use the display CSS property to hide the checkbox input. The next step is to specify the dimension of the checkbox. We need to ensure the dimension is exactly the same size of the background image which has 45px width and 27px height. We set the cursor property to a pointer which will have a hand cursor effect when you hover the mouse on top of the background image. There is a symbol plus we use in the CSS code that represent adjacent sibling combinator. It combines two sequences of input checkbox and a label tag. To determine when we are going to change the image of a checked state, we can use the keyword checked.

<style type="text/css">
	input[type="checkbox"].custom-checkbox{
		display:none;
	}
	
	input[type="checkbox"].custom-checkbox + label{
		width:45px;
		height:27px;
		cursor:pointer;
		display:inline-block;
		background:url(https://bytutorial.com/assets/content/images/css/checkbox-unchecked.png) no-repeat;
	}
	
	input[type="checkbox"].custom-checkbox:checked + label{
		background:url(https://bytutorial.com/assets/content/images/css/checkbox-checked.png) no-repeat;
	}
</style>

Give a try by clicking the sliding image to see the effect of sliding image. Pretty simple right? If you have any question, feel free to post your question below.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.