CSS Toggle Switches

For "On/Off" states, use checkboxes.

<label class="checkbox toggle candy" onclick="">
	<input type="checkbox">
	<span>
		Wireless
		<span>Off</span>
		<span>On</span>
	</span>

	<a class="slide-button"></a>
</label>

The toggle is fluid, you can set any width on it.

<label class="checkbox toggle candy" style="width:100px" onclick="">
	...

If you need different states that are more specific than "On/Off", or more than two of them, use radio buttons.

<label>View</label>
<div class="switch candy blue">
	<input id="week" name="view" type="radio" checked>
	<label for="week" onclick="">Week</label>

	<input id="month" name="view" type="radio">
	<label for="month" onclick="">Month</label>

	<span class="slide-button"></span>
</div>

The radio switches are also fluid, so you can create your own layout.

<label style="float: left; width: 100px;">View</label>
	<div class="switch candy blue" style="float: left; width: 200px;">
		...

And add up to 5 items. You could create new rules for more items, but if you have more than 5 items, you shouldn't really use a switch.

<label>View</label>
	<div class="switch switch-5 candy yellow">
		...

There are 3 included themes with the toggle switches.

Candy

Based on Sort Switches / Toggles by Orman Clark.

It includes 2 additional color schemes, besides the default green: blue and yellow.

Android

iOS

Compatibility

The toggle switches should work on all modern browsers, including mobile ones.

Browsers without support for mediaqueries, such as IE8 and bellow, get standard form elements.

The onclick="" attribute is required for older iOS and Opera Mini support.

Acknowledgements

• Standalone themes are based on:
  • Sort Switches / Toggles by Orman Clark
  • Apple iOS
  • Android Holo
• iOS label tap issue and fix reported by @scruffian

More about the development process on my website:

• CSS Toggle Switches
• Mobile support for the CSS toggle switches