自定义checkbox样式

效果图：

HTML

<div class="list">
            <label><input type="checkbox">旅游</label>
            <label><input type="checkbox">娱乐</label>
            <label><input type="checkbox">学习</label>
            <label><input type="checkbox">打篮球</label>
        </div>

CSS

    .list {
                user-select: none;
                margin-top: 10px;
                text-align: center;
                height: 20px;
            }

            .list input {
                margin: 0 5px;
                /* 相对定位 */
                position: relative;
            }

            .list input::after {
                content: "";
                width: 18px;
                height: 18px;
                background-color: #8b8b8b;
                /* 绝对定位 */
                position: absolute;
                /* 圆 */
                border-radius: 50%;
                top: -3px;
                left: -3px;
            }

            .list input::before {
                position: absolute;
                content: "√";
                z-index: 2;
            }

            .list input:checked::after {
                background-color: red;
            }

            .list input:checked::before {
                color: #fff;
            }