From the Apple docs:
You use the UISwitch class to create and manage the On/Off buttons you see, for example, in the preferences (Settings) for such services as Airplane Mode. These objects are known as switches.
CSSUISwitch is a recreation of iOS's UISwitch with web technologies.
- CSS/LESS only no image assets, no javascript, retina ready, 2kb
- It's just a checkbox accessibility, works with
:checked
,[disabled]
- runs in Webkit browsers
You can just throw build/CSSUISwitch.css
into your project, or bower install CSSUISwitch
and use the following HTML:
<div class="input-switch">
<input type="checkbox"/>
</div>
If you want to customize the switch you can change the public-api aka class name in src/api.less
, config variables in src/config.less
and the code itself in src/switch.less
.
CSSUISwitch is brought to you by Stephan Bönnemann. If you want to have some background read this blogpost.