实现自定义样式的Radio Button

有以下HTML片断：

<div class="female">
    <input type="radio" name="sex" />
    <label for="female">女</label>
</div>
<div class="male">                
    <input type="radio" name="sex" />
    <label for="male">男</label>
</div>

此时的页面：

思路：

1. 可为label元素前用伪类增长新的内容（自定义的Radio样式）。
2. 用CSS让新增的样式（背景色）随着单选按钮的选中和取消而变化。
3. 隐藏真正的单选按钮。

第一步：用伪类为label元素增长自定义的Radio样式：

input[type="radio"]+label::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    width: 1em;
    height: 1em;
    margin-right: .4em;
    border-radius: 50%;
    border: 1px solid #01cd78;
    text-indent: .15em;
    padding: .1em; /*注意这里有个padding，这是为了裁切背景色的时候
                    让内容和边框留个间隙，这样就造成了Radio的外观*/
}

此时的页面：

第二步：让新增的样式（背景色）随着单选按钮的选中和取消而变化：

input[type="radio"]:checked+label::before {
    background-color: #01cd78;
    background-clip: content-box;
}

这个类是说，在当前选中的那个radio类型的input后面的label，对这个Label添加背景色，并裁剪背景色(background-clip)，只为content上色(content-box)，而padding不上色（第一步的类中，最后一个padding不能少）。

此时的页面：

第三步：隐藏原始的Radio Button：

这里咱们使用透明度opacity来控制，将原始的Radio变成透明的：

input[type="radio"] {
    position: absolute;
    opacity: 0; /*彻底透明*/
}

此时的页面：

大功告成！

注意这里除了opacity:0之外，还有一个position:absolute，若是只有opacity项，那么此时的radio还在原来的位置，只是看不见而已（红框即为原来radio的位置）：

加上这个position:absolute，能够改变radio在文档流中的位置，而本例DOM比较简单，radio的位置移动后，会出如今这个伪类新增的元素（即绿色的圈）附近，因此此时能够直接点击绿圈。可是此时的radio位置和画圈的位置并不彻底重合（以下图所示），因此正常的开发中还须要用top/bottom/left/right来稍微调整一下radio的位置，使其尽可能与画的圈重合，不然可能点击不到。

 

参考页面：

http://www.javashuo.com/article/p-kykpovpu-bx.html