/CSSUISwitch

CSSUISwitch is a recreation of iOS's UISwitch with web technologies.

Primary LanguageCoffeeScriptMIT LicenseMIT

CSSUISwitch

Screenshot

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

Usage

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.

About

CSSUISwitch is brought to you by Stephan Bönnemann. If you want to have some background read this blogpost.