实现自定义样式的Radio Button

为什么80%的码农都做不了架构师？>>>   

有如下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的位置，使其尽量与画的圈重合，否则可能点击不到。

 

参考页面：

https://www.cnblogs.com/xinjie-just/p/5911086.html

转载于:https://my.oschina.net/itblog/blog/1613997