Toggle Switches
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.
4 comments
Kinderheim said
Hello !
Great job ! I will definitly use this.
One question : how would it work with 3 positions ?
Thibaut said
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
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
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.