修改原生checkbox的样式

源代码
vxgzh【图说GIS】
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    input[type="checkbox"] {
        position: absolute;
        clip: rect(0, 0, 0, 0)
    }

    .mark::before {
        content: '';
        display: block;
        float: left;
        text-align: center;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        border-collapse: separate;
        transition: all .3s;
        cursor: pointer;
    }

    input[type="checkbox"]:checked+.mark::before {
        content: '\2714';
        border: 1px solid #1890ff;
        background-color: #1890ff;
        border-radius: 2px;
        color: #fff;
        cursor: pointer;
    }
</style>

<body>

    <div id="menu">
        <div class="layui-form">
            <div style="display:flex;align-items: center;">
                <input type="checkbox" id="markcheckbox1">
                <label class="mark" for="markcheckbox1">我是复选框</label>
            </div>
        </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

相关阅读:
裸机与RTOS（概念、关系、区别）
WPF之自定义控件模版
【最新计算机毕业设计】JAVA基于微信小程序的英语学习激励系统
HandlerThread源码理解
BiConsumer的使用
Linux常用命令(上).
nVisual网络可视化管理平台功能和价值点
【Hadoop】- YARN架构[7]
比特大陆：全员工资停发！昔日的“矿机一哥”遇现金流危机？
excel功能区（ribbonx）编程笔记--5 菜单

原文地址：https://blog.csdn.net/qq_19689967/article/details/126588536