Toggle Switches

Published on
Tags
Switch, Toggle, Radio, Colors, CSS3 Transitions, Form
No. of comments
8 comments
Browser compatibility
Firefox 4, Safari 5.1, Chrome 13, Opera 10, IE 9
License
MIT License
Toggle Switches CSS Code Snippet

A set of fully functional toggle switches in multiple colors. Useful for switching views and toggling settings.

The functionality is achieved through hidden radio inputs and the use of the :checked and +/~ sibling CSS3 selectors.

Enjoy the smooth on/off transition!

Original PSD by Orman Clark.

8 comments

Kinderheim said
0e3bfab496b6b40f98352c633ce1baee

Hello !
Great job ! I will definitly use this.
One question : how would it work with 3 positions ?

Thibaut said
B6374f07090c513a73b875e0c5fe5924

Hi Kenderheim
You'd have to adjust the width of the switch to $labelWidth * 3, and add a new declaration .switch-input:checked + .your-new-label ~ .switch-selection { left: $labelWidth * 2 + 2px; } for your third position. There'd also be some padding adjustments to make.

oomskaap said
83ac5118ffcadd2b1be96a2836dcfb7e

Bonjour Thibaut,

I was wondering if an href link can automatically fire when you change a switch? For example, I would like to have a swtich "Oldest" and "Newest", and have them switching between these two links:

<a href="<?php echo add_query_arg( array('v_sortby' => 'date', 'v_orderby' => 'desc') ) ?>" rel="nofollow" class="lowest">Newest</a>

<a href="<?php echo add_query_arg( array('v_sortby' => 'date', 'v_orderby' => 'asc') ?>" rel="nofollow" class="lowest">Newest</a>

Thibaut said
B6374f07090c513a73b875e0c5fe5924

You'd have to use JavaScript to detect the change, and then replace the content dynamically.
Or you could simply replace the label/input pairs with normal links.

Mike Starov said
7f2400e25aa172e4eabf8582aab059b8

Very cool. Thanks for putting out there. We'll try to integrate it in our new design. I love the fact that it does not rely on JS.

Chris Moody said
A54eb57ebde9a3248d8d2e408de23979

Hello,
I have integrated the toggle switch onto my website, is there a way I can make sure the switch remains 'off' or 'on' (Whichever has been selected by the user) when the page has been left and then returned to?

Many thanks

Siddesh said
0add67a41531f25f659f20414d88f871

Great article actually i have used it, but one thing was expecting, can we toggle both side, irrespective of where you click.

like Example. http://www.bootply.com/92189#

Pepe Lepew said
14df137ce6ffe4235263af111c59b6f8

This is amazing and works like a dream, but how can get this to work with 3 or 4 items? I have searched and can't find anything remotely as nice.

Leave a comment