radio和checkbox的自定义样式
input控件中，checkbox和radio不像text可以比较随意的设置样式。 在Firefox里同事设置宽和高可以改变checkbox和radio的大小，除此之外，在chrome等浏览器里对他们设置宽高是不起作用的。
本文给出了两种自定义checkboxhe和radio样式的方法：
方法一：appearance + :after
该方法的主要思路是：首先利用appearance属性清除radio或checkbox的原生样式，然后在此基础添加上一些自定义的样式和动画效果，以达到自定义样式的目的。 用到了:after伪元素生成控件内部的选中样式。
input[type="radio"],
input[type="checkbox"] {
appearance: none;
}
直接看demo：
demo截图：
方法二：opacity: 0(display:none) + 额外标签
这个方法是多数UI库使用的方法：首先将checkbox和radio隐藏，然后让相邻它的标签（或label标签）伪装成它，并设置样式， 利用css3的“相邻兄弟选择器”（ + 或 ~ ）,通过checkboxhe和radio的选中切换该元素不同的样式，
直接看demo：
时间仓促做的有点粗糙，只能简单地用绿色圆点和方点示意选中状态了。对比一下
- 方法一改变原控件的样式，只针对该控件做样式修改； 方法二相当于把原控件隐藏，添加其他标签代替了它
- 方法一比较简单，但应用场景单一，只能用于这种表单填写的场景；方法二较复杂，需要更多的标签支持， 但该方法应用场景更灵活，可用来实现tab页切换等效果，见另一篇checkbox的应用
- 两个缺点都是兼容性不好，只支持高版本浏览器，方法一的appearance在用时还需要加上浏览器前缀
- 等等
有说的不对的地方，望重拍指正。
