Switch控件的设计和制作，支持IE11/Chrome/Firefox

在表单操作中经常会出现一些需要选项，但选项很少的场景。比如设置一个东西是否开启则有“开启”和“关闭”这两个选项，我们可以在前面放一个描述，然后用一个checkbox的状态来表示“开启”和“关闭”。但这种设计并不人性化，所以需要更加一目了然的Switch控件。 虽然Switch控件有不人性化的地方，但比起浏览器自带的checkbox要好的多。其实这个Switch控件的概念还是很有用的，主要问题是控件的操作体验和UI设计。一个没有做任何美化的东西确实让人看着很蛋疼，也难怪要被喷。现在我们再来做一个Switch控件，稍微设计一下UI，并兼容到更多浏览器。

这次的设计主要是用了CSS的属性选择器，而属性也使用的时标准的自定义属性data-*，操作则使用dataset（这玩意儿IE11才开始兼容）。其它就是一些比较古老的东西了。但是在IE11上有个属性选择器的样式无法及时更新的BUG，所以上面的代码中为元素的className属性重赋值，触发CSS重新计算。 其实这个控件很早以前就有需求了，现在手机App上也经常见到。比起传统的一个checkbox要好的多吧？ 这篇文章中我只做了仅支持两个选项的Switch控件，实际上“开关”的概念不仅限于此。有 这样的开关，还有 这样的开关。我们的Switch控件设计也可以有多个选项（但也不要太多，否则不如用select控件），具体的设计可以参考现实中的事物。 via：Web技术研究所

标签:CSSIE WebSwitch