Stylish CSS switch without javascript

Here I will show how to make a switch based on input on pure CSS.


Demo
All files


To begin with, I must say that input type checkbox has this feature:
if it is selected (it is checked), then the new attribute is assigned to the element.
Our element will be built on this effect.
')
To begin with, we will describe the input and wrapper itself.

<div class="switcher"> <input id="sw" type="checkbox" class="switcher-value"> <label for="sw" class="sw_btn"></label> <div class="bg"></div> </div> 

As a slider, we will use the label element, since it is rigidly bound by the ID to a specific input. That is, clicked on the label - count, clicked and ticked the input.

A div with bg class is just a background.

We describe the main styles

 .switcher { width: 124px; height: 49px; cursor: pointer; position: relative; } .switcher * { transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -o-transition: all .2s; -ms-transition: all .2s; } .switcher .sw_btn { background: url('btn.png') 0% 0% no-repeat; width: 49px; height: 49px; display: block; cursor: pointer; z-index: 1; position: relative; } .switcher .bg { background: url('bg-off.png') 0% 0% no-repeat; } .switcher input.switcher-value { display: none; } .switcher .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; } 

As you can see from the code, we hide the input itself. We need it only as a keeper of values.
(By the way, you can get the value of our future switch as the value of this very input)

Put a picture with the switch off ('bg-off.png) on ​​the background:


We also set the transition property for smooth switching.

And now - the most interesting

 .switcher input.switcher-value:checked ~ .sw_btn { margin-left: 68px; } .switcher input.switcher-value:checked ~ .sw_btn ~ .bg { background: url('bg-on.png') 0% 0% no-repeat; } 

These two lines and switch =)

The first line means that the external indent will be 68px for the element with the class sw_btn,
which immediately follows the INCLUDED input (this is what we are told: checked).
And the second, that you need to change the background for an element with a class .bg, following an element with a class sw_btn,
which goes right behind the INCLUDED INPUT.
For the disabled input, these 2 properties do not work.



So, with the help of a couple of small tricks and half a liter of coffee , you can create an interesting switch without cluttering the javascript-animations page.