step1： 基本的html和css

首先先写出基本的html和css： 效果如下图：

  <div class="container">
        <div class="checkbox-wrapper">
            <input type="checkbox" id="check" class="checkbox-item"><label for="check" class="checkbox-txt">这是一个自定义样式的checkbox</label>
        </div>
    </div>

      body {
            background-color: rgb(240, 169, 215);;
            font-size: 10px;
        }
        
        .container {
            box-sizing: border-box;
            margin: 60px auto;
            padding: 50px;
            width: 300px;
            height: 200px;
            border-radius: 4%;
            background-color: white;
        }
        
        .checkbox-wrapper {
            margin: 0 auto;
        }
        
        .checkbox-item {
            /* 使lable文字和checkbox对齐 */
            vertical-align: middle;
        }
        
        .checkbox-txt {
            /* 防止双击后自动选中文字 */
            user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }

我们的目标效果是边框是粉色，被选中出现粉红色对勾（拉到文章最后可看到最后效果）。

checkbox本身是无法直接用css修改样式的，比如：

我们可以用outline给checkbox加一个边框，然而它本身的边框还在那里（如下图所示），而添加border属性不起作用。我们可以选择用css代码隐藏掉默认样式，但可能会引发兼容性等问题。

所以最好的做法是：把默认的checkbox隐藏掉，然后利用伪元素来重新构建checkbox外表。

step：2 用before元素构建勾选前效果

我们先用before元素来构建勾选前的效果：

    .checkbox-item {
            vertical-align: middle;
            /* 隐藏掉默认checkbox */
            visibility: hidden;
            position: relative;
            /* 使checkbox隐藏后伪元素鼠标指针也能变成手的样子 */
            cursor: pointer;
        }
      .checkbox-item::before {
            /* 默认情况下隐藏掉checkbox后伪元素也是隐藏的 */
            display: block;
            visibility: visible;
            content: '';
            position: absolute;
            width: 13px;
            height: 13px;
            border: 1px solid rgb(209, 107, 134);
            border-radius: 2px;
            /* 修改位置，默认情况下它是从原始checkbox左上角开始的*/
            left: -13px;
            top: -2px;
        }
        

此时页面是这样

step3: 用after元素构建勾选后效果

下面我们用after元素制作对勾，对勾的制作思路很简单，我们只需要设置两个相邻边框，再把它旋转，就可以变成对勾了。如下图

所以写好的after如下

      .checkbox-item::after {
            display: block;
            visibility: visible;
            content: '';
            width: 3px;
            height: 7px;
            position: absolute;
            left: -8px;
            border-right: 3px solid #ed7a9c;
            border-bottom: 3px solid #ed7a9c;
            transform: rotate(45deg); 
        }

此时的页面效果：

step5 将勾选行为和勾选后效果关联起来

只需先将after改成 visibility: hidden，在添加勾选后可见效果即可。

        .checkbox-item::after {
            visibility: hidden;
        }
        .checkbox-item:checked:after {
            visibility: visible;
        }

整体代码：