Toggle Switches

Published on
Tags
Switch, Toggle, Radio, Colors, CSS3 Transitions, Form
No. of comments
6 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.

6 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

Leave a comment