CSS模拟radio和Checkbox元素

最近胡老师给了我一个任务：在表单中模拟出checkbox样式的input控件，只能用CSS实现。第一眼觉得不难，后来才发现还有不少坑，一共有两种方法实现这种样式，大体都相同，但都有一些缺点，等跟胡老师碰头时在进行商讨：

以checkbox为例：
主要要实现以下两个要求：
1.实现input为checkbox的样式，可以选择点击，也可以通过form表单传值；
2.在除Safari浏览器外，支持tab键切换至下一个控件；

基于这两点，有以下两种方法：
1. 先设置input为checkbox的元素的display:none隐藏起来，在每个input标签后面添加一个label标签，可以在CSS中根据点击label标签达到对与其对应的input标签设置checked属性，可以在有checked属性的input标签后面的label标签后进行修改样式使得样式与checkbox样式一致；在checkbox对应的label标签中，添加tabindex属性使其可以用tab键进行切换。
主要代码如下：
HTML:

 <label>
        <span>Your Education :</span>
        <input class="simulate-checkbox" name="education" id="checkbox-one" type="checkbox">
        <label for="checkbox-one"></label>
        <p>high school</p>
        <input class="simulate-checkbox" name="education" id="checkbox-two" type="checkbox">
        <label for="checkbox-two"></label>
        <p>college</p>
        <input class="simulate-checkbox" name=