Creating a Toggle Switch in CSS3

These days many websites are making use of mobile like toggle switches in their interface. It makes the website appear more attractive and interactive. Now many of these toggle switches perform only the basic function that they are meant for. Here we shall try and improve their functionality to make them appear more attractive to the users.

To start with let us plan what we want to achieve with our switch. We will make use of enhanced standard checkboxes without using any extra HTML tags or attributes. Our switch must support input labels and shall only use CSS without images or JavaScript. Apart from this we shall have some simple animation on the switches.

HTML

We need an input checkbox and a label and this is how the HTML would look like

<div>

   <input type="checkbox" id="switch1" name="switch1" class="switch" />

   <label for="switch1">first switch</label>

</div>

Here we have ensured that the input has a class of “switch” assigned. In this example we are making use of three toggle switches namely switch1, switch2 and switch3. Some developers might be surprised to see a wrapper div but this is a must as we are attempting to toggle between two switches. This switch will work on all browsers including IE 6, 7 and 8

CSS

Now we come to the business end of our project. Here we will start by hiring the input box using negative margin. You might think about using display:none but that often disables on mobile devices.

input.switch:empty

{

   margin-left: -999px;

}

Once we are done with this we will style sibling labels in the input checkbox:

input.switch:empty ~ label

{

   position: relative;

   float: left;

   line-height: 1.6em;

   text-indent: 4em;

   margin: 0.2em 0;

   cursor: pointer;

   -webkit-user-select: none;

   -moz-user-select: none;

   -ms-user-select: none;

   user-select: none;

}

Note that we have made use of position:relative i.e. the text-indent that provides room for our switch. Also note the line-height that defines its height.

We have created the toggle itself using :before and :after elements for the different switches. What we have now is both elements are positioned at the left-hand edge of our label. We have also defined a transition for the animation.

input.switch:empty ~ label:before,

input.switch:empty ~ label:after

{

   position: absolute;

   display: block;

   top: 0;

   bottom: 0;

   left: 0;

   content: ' ';

   width: 3.6em;

   background-color: #c33;

   border-radius: 0.3em;

   box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);

   -webkit-transition: all 100ms ease-in;

   transition: all 100ms ease-in;

}

input.switch:empty ~ label:after

{

   width: 1.4em;

   top: 0.1em;

   bottom: 0.1em;

   margin-left: 0.1em;

   background-color: #fff;

   border-radius: 0.15em;

   box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);

}

As and when the checkbox is checked the switch is moved to the right-hand edge and this changes the background color -

input.switch:checked ~ label:before

{

   background-color: #393;

}

   input.switch:checked ~ label:after

{

   margin-left: 2em;

}

About the Author: This article is contributed by ValueCoders, a leading web & software development company India through which you can hire WordPress programmers, Drupal programmers, Magento programmers and many more. One can also hire HTML programmers here for effective web development services.