自定义input type=checkbox

原创于 2018-11-06 10:23:42 发布 · 5.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #前端

本文介绍了一种使用CSS自定义Checkbox外观的方法，通过结合label和伪元素实现独特样式，同时隐藏默认Checkbox，适用于网页设计和前端开发。

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

一个比较常见的需求，自定义checkbox那个箭头的样式

核心思想是用一个lable和checkbox绑定，将css加到label上，然后隐藏原来的checkbox

先写个checkbox加label，给label前加个伪元素

    <div>
        <input type="checkbox" id="test">
        <label for="test">是否同意</label>
    </div>

    input[type="checkbox"] + label::before {
        content: "\a0";
        display: inline-block;
        width: 15px;
        height: 15px;
        line-height: 15px;
        background-color: silver;
        border-radius: 5px;
    }

在这里插入图片描述

checkbox选中时，修改伪元素里的内容，\2713是一个√

    input[type="checkbox"]:checked + label::before {
        content: "\2713";
        background-color: gold;
    }

在这里插入图片描述

然后隐藏原来的checkbox

    input[type="checkbox"] {
        display: none;
    }

在这里插入图片描述