iSwitch

iSwitch helps you turn your default HTML checkbox inputs into iOS 7 style switches by only one CSS class.

v1.0.0 2015-02-05

优势

• 纯CSS3实现, 无任何依赖, 易于使用
• 事件和状态兼容原有的checkbox
• 非常小巧 2.52 kB → 1.61 kB → 662 B (gzip)
• 结构简单, 代码清晰, 可随意定制出适合自己的样式

使用方法

1. 将iswitch.css添加到页面

   <link rel="stylesheet" href="dist/iswitch.min.css">

2. 给input checkbox添加iswitch的class

   <input type="checkbox" class="iswitch">

3. 刷新页面, 闪亮登场
   • 默认状态的iSwitch 选中状态:
   • 选中状态的iSwitch 选中状态:
   • 禁用默认状态的iSwitch 选中状态:
   • 禁用选中状态的iSwitch 选中状态:

支持的浏览器

• PC端(通过Browserling测试)
  • Chrome 12+
  • Safari 5.0.5+
  • Opera 15+
• 移动端(通过BrowserStack测试)
  • iOS 6(iPhone 4S/5/5S/6)
  • Android 4+

参考

• 招商银行 手机银行网页版
• Switchery

Examples

• Example

License

The MIT License (MIT)

Copyright (c) 2015 Sun