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.

Comments

Post a Comment

Popular posts from this blog

8 Best CMSs for building a well structured social networking website

Image
In this era when social networking is the best means of presentation, identity and image building, content presentation has become very important. Using the right kind of CMS is vital in bringing out desired social networking website presentation. Elgg CMS is a great open source community that has a huge following. This gives corporate feel to social networking websites. Aces include great update level, several extensions, great documentation and active community. Pligg is a very easy to use CMS that is easier to manage. Interactive communities can be built with a wide varety of templates, extensions and plugins to choose from. Dolphin has some great features such as video player, recorder, events, forums, video messaging, groups, emails. Various other plugins and features make this CMS suitable for communities, social networks and dating websites. Oxwall is swift and easy to integrate CMS suitable for specialized category of websites. Ning is suitable for integrating its features...
Read more

Manor House - Telscombe Village

Image
  Manor House - Telscombe Village  England  ESTUDIO HISTÓRICO / HISTORICAL STUDY : - Telscombe Village: - Introducción / Introduction : Telscombe village is set unobtrusively in a valley within stunning downland. The small village remains surprisingly remote and isolated given its close proximity to the urban coastal development at Saltdean, Telscombe Cliffs and Peacehaven. The settlement is linear in form running north-south. The village is accessed by car from the C7 Lewes to Newhaven road along a long, narrow country lane, which then runs through the village and peters out into a public footpath, which runs towards Saltdean over the Downs. The buildings are tightly arranged around the road, which gives the village a compact feel. The houses themselves although tight to the road do not appear at all cramped. There is a mix of house types, sizes and uses of buildings within the village. There is the village hall, a farm, a youth hostel, a church and residential buildings...
Read more