实现自定义样式的Radio Button

最新推荐文章于 2025-06-07 15:37:18 发布

weixin_34414196

最新推荐文章于 2025-06-07 15:37:18 发布

阅读量669

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：https://my.oschina.net/itblog/blog/1613997

本文介绍如何使用CSS伪类实现自定义样式的单选按钮。通过为label元素添加伪元素并结合input的状态变化，实现了美观且交互友好的Radio按钮。文章详细讲解了实现步骤及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么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>

此时的页面：

思路：

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

第一步：用伪类为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的位置，使其尽量与画的圈重合，否则可能点击不到。