打造简洁优雅的自定义单选按钮：纯原生HTML、CSS与JavaScript实现

结城

已于 2025-07-24 14:37:53 修改

阅读量366

点赞数

CC 4.0 BY-SA版权

分类专栏：原生JavaScript实战文章标签： input单选框的美化

于 2019-03-23 08:52:42 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43487181/article/details/88756000

原生JavaScript实战专栏收录该内容

3 篇文章

订阅专栏

在前端开发中，单选按钮（Radio Button）是表单交互中常见的组件，但原生单选按钮的样式往往单调，难以满足现代UI设计的需求。今天，我们将通过纯原生的HTML、CSS和JavaScript，打造一个美观、实用的自定义单选按钮组件，代码简洁，适合初学者上手，也为进阶开发者提供灵感！

为什么要自定义单选按钮？

原生的<input type="radio">样式受限于浏览器默认设计，难以适配多样化的UI风格。自定义单选按钮的优势在于：

高度可定制：通过CSS实现个性化外观，完美融入设计。
交互流畅：结合JavaScript实现动态切换，提升用户体验。
跨浏览器一致性：避免浏览器间的样式差异，统一视觉效果。

下面，我们将基于一个实际案例，详细解析如何用纯原生方式实现自定义单选按钮。

实现思路

HTML结构：使用label和span搭建单选按钮的视觉结构，隐藏原生input。
CSS样式：通过类切换和伪元素实现选中与未选中状态的样式变化。
JavaScript交互：监听点击事件，确保同一组内只有一个选项被选中。

代码详解

HTML结构

我们用div.radio-group作为单选按钮组的容器，每个单选按钮由label.radio和span组成，span负责展示按钮的视觉效果。原生input被隐藏，样式和交互完全由CSS和JavaScript控制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义单选按钮</title>
</head>
<body>
    <div class="radio-group">
        <label class="radio checked">
            <span></span> 审核
        </label>
        <label class="radio">
            <span></span> 未审核
        </label>
    </div>
    <div class="radio-group">
        <label class="radio checked">
            <span></span> 男
        </label>
        <label class="radio">
            <span></span> 女
        </label>
    </div>
</body>
</html>

CSS样式

CSS部分定义了单选按钮的视觉效果，包括默认、选中和禁用状态：

默认样式：span设置为20x20像素的圆形，灰色边框，模拟单选按钮外观。
选中样式：通过.checked类改变边框颜色，并用伪元素:after添加蓝色圆点。
禁用样式：通过.disabled类降低透明度，禁用交互。

.radio-group {
    margin-bottom: 30px;
}
.radio {
    cursor: pointer;
    user-select: none;
}
.radio input {
    display: none;
}
.radio span {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
}
.radio span:after {
    display: block;
    content: "";
}
.radio.checked {
    color: rgb(0, 174, 255);
}
.radio.checked span {
    border-color: rgb(0, 174, 255);
    color: white;
    text-align: center;
    line-height: 1em;
}
.radio.checked span:after {
    content: "●";
    color: rgb(0, 174, 255);
}
.radio.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

JavaScript交互

JavaScript负责处理点击事件，确保同一组内只有一个按钮被选中：

获取所有.radio元素，绑定onclick事件。
点击时，移除同组内所有按钮的checked类，仅为当前按钮添加checked类。

var radioLis = document.getElementsByClassName('radio');
for (var i = 0; i < radioLis.length; i++) {
    radioLis[i].onclick = function () {
        var radio_group = this.parentNode;
        var radioChilds = radio_group.children;
        for (var i = 0; i < radioChilds.length; i++) {
            radioChilds[i].className = 'radio';
        }
        this.className = 'radio checked';
    };
}