效果：

自定义勾选框

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #1A1E23;
        }

        .todo-list {
            display: flex;
            flex-direction: column;
            padding: 0 75px 10px 30px;
            background: #162740;
            border: transparent;
        }

        .todo-list__title {
            padding: 3px 6px;
            color: #f1faee;
            background-color: #264456;
        }

        .todo-list__label {
            display: flex;
            align-items: center;
            margin: 40px 0;
            font-size: 24px;
            font-family: Lato, sans-serif;
            color: #f1faee;
            cursor: pointer;
        }

        input[type="checkbox"] {
            opacity: 0;
            appearance: none;
        }

        /*正方形转勾选的动画效果*/
        input[type="checkbox"] + .check {
            position: absolute;
            width: 25px;
            height: 25px;
            border: 2px solid #f1faee;
            transition: 0.2s;
        }
        input[type="checkbox"]:checked + .check {
             width: 25px;
             height: 15px;
             border-top: transparent;
             border-right: transparent;
             transform: rotate(-45deg);
        }

        /*选中时字体颜色变化，并且出现从左到右的划线，通过scaleX()以及transform-origin实现*/
        input[type="checkbox"] ~ span {
            position: relative;
            left: 40px;
            white-space: nowrap;
            transition: 0.5s;
        }
        input[type="checkbox"]:checked ~ span {
            color: #585b57;
        }
        input[type="checkbox"] ~ span::before {
             position: absolute;
             content: "";
             top: 50%;
             left: 0;
             width: 100%;
             height: 1px;
             background: #f1faee;
             transform: scaleX(0);
             transform-origin: right;
             transition: transform 0.5s;
        }
        input[type="checkbox"]:checked ~ span::before {
             transform: scaleX(1);
             transform-origin: left;
        }

    </style>
</head>
<body>
<form>
    <!--与input密切相关的是label元素，因为当用户点击label元素时同样会触发input状态的变化。利用这一特性，可以给label自定义样式，不仅如此，还可以在label旁边添加更多的元素，用兄弟选择符~选中它们来定义样式，利用:checked伪类监听原input的状态变化，再加上一点动画，就完成了对input的定制-->
    <!--目前来说，input元素也支持伪元素了，这就带来了另一种思路：用appearance: none消除input的默认样式，再用伪元素对其进行定制，这样label就可以保留它原先的样式了。-->
    <fieldset class="todo-list">
        <legend class="todo-list__title">My Special Todo List</legend>
        <label class="todo-list__label">
            <input type="checkbox" name="" id="" />
            <i class="check"></i>
            <span>Make awesome CSS animation</span>
        </label>
        <label class="todo-list__label">
            <input type="checkbox" name="" id="" />
            <i class="check"></i>
            <span>Watch awesome bangumi</span>
        </label>
        <label class="todo-list__label">
            <input type="checkbox" name="" id="" />
            <i class="check"></i>
            <span>Encounter awesome people</span>
        </label>
        <label class="todo-list__label">
            <input type="checkbox" name="" id="" />
            <i class="check"></i>
            <span>Be an awesome man</span>
        </label>
    </fieldset>
</form>

</body>
</html>