自定义Checkbox样式-CSDN博客

本文链接：https://blog.csdn.net/qq_43487181/article/details/88755958

复选框（Checkbox）是前端开发中常见的表单元素，但原生的复选框样式往往过于简单，难以满足现代网页设计的美观需求。今天，我们将通过纯原生的HTML、CSS和JavaScript，打造一个优雅、实用的自定义复选框组件。代码简洁易懂，既适合初学者快速上手，也能为有经验的开发者提供灵感！

为什么要自定义复选框？

原生的<input type="checkbox">受限于浏览器默认样式，难以适配多样化的UI设计。自定义复选框的优势包括：

样式自由：通过CSS实现个性化外观，轻松融入设计。
交互流畅：借助JavaScript实现动态切换，提升用户体验。
跨浏览器一致性：统一视觉效果，避免浏览器间的样式差异。

接下来，我们将基于一个实际案例，详细解析如何用纯原生方式实现自定义复选框。

实现思路

HTML结构：使用label和span搭建复选框的视觉结构，隐藏原生input。
CSS样式：通过类切换和伪元素实现选中与未选中状态的样式变化。
JavaScript交互：动态添加span元素，监听点击事件，实现复选框的切换功能。

代码详解

HTML结构

我们使用label包裹原生input和文本，动态插入span作为复选框的视觉元素。原生input被隐藏，样式和交互由CSS和JavaScript控制。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义复选框</title>
</head>
<body>
    <label>
        <input type="checkbox"> 篮球
    </label>
</body>
</html>

CSS样式

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

默认样式：span设置为20x20像素的方形，灰色边框，模拟复选框外观。
选中样式：通过.checked类改变边框和背景颜色，并用伪元素:after添加“√”符号。
禁用样式：通过.disabled类降低透明度，禁用交互。

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

JavaScript交互

JavaScript负责动态生成span元素并处理点击事件，实现复选框的选中/取消功能：

遍历所有input[type="checkbox"]，为每个label插入span并添加checkbox类。
阻止原生input的点击事件冒泡，点击label时切换checked类。
检查是否为禁用状态（disabled），确保禁用时不可交互。

var checkboxs = document.querySelectorAll("[type='checkbox']");
for (var i = 0; i < checkboxs.length; i++) {
    var checkbox = checkboxs[i];
    checkbox.onclick = function(e) {
        e.stopPropagation(); // 阻止冒泡到原生input
    };
    var label = checkbox.parentNode;
    var span = document.createElement('span');
    label.insertBefore(span, checkbox);
    label.className = 'checkbox';
    label.onclick = function() {
        var labelName = this.className;
        if (labelName.indexOf('disable') > -1) {
            return;
        }
        if (labelName.indexOf('checked') > -1) {
            this.className = 'checkbox';
        } else {
            this.className = 'checkbox checked';
        }
    };
}