纯CSS自制复选框

复选框 / 多选

选择	效果
xInputA	圆形
xInputB	方形
x1	大
x2	标准

第一种

圆形 + 大 = 如图

 <div class="xInputA x1">
      <label>
          <input type="checkbox" />买房
      </label>
      <label>
          <input type="checkbox" />买车
      </label>
      <label>
          <input type="checkbox" />买美女
      </label>
      <label>
          <input type="checkbox" />买保险
      </label>
</div>

---

第二种

方形 + 中 = 如图

<div class="xInputB x2">

    <label>
        <input type="checkbox" />买房
    </label>
    <label>
        <input type="checkbox" />买车
    </label>
    <label>
        <input type="checkbox" />买美女
    </label>
    <label>
        <input type="checkbox" />买保险
    </label>
    
</div>

---

所有CSS持续更新

 html,
    body {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .xInputA {
        label {
            display: flex;
            align-items: center;
            cursor: pointer;
            margin-bottom: 30px;
        }

        input {
            -webkit-appearance: none;
            display: flex;
            margin: -3px 5px 0 0 !important;
            cursor: pointer;
            vertical-align: middle;
            background: #ccc;
            border-radius: 50px;
            transition: 0.4s all;
            justify-content: center;
            align-items: center;
            outline: none;
        }

        input::after {
            width: 9px;
            height: 9px;
            background: #fff;
            content: "";
            display: block;
            border-radius: 54px;
            pointer-events: none;
        }

        input:checked {
            outline: #000088;
            background: #55aaff;
        }
        
    }



    .xInputB {
        label {
            display: flex;
            align-items: flex-end;
            cursor: pointer;
            margin-bottom: 30px;

            input {
                -webkit-appearance: none;
                margin: -3px 5px 0 0 !important;
                cursor: pointer;
                background: #e7e7e7;
                transition: 0.4s all;
                outline: none;
            }

            input:checked {
                outline: none;
                list-style: none;
                background: #55aaff
            }
            


        }
    }

    
    div.x1 label{
        align-items:end!important;
        font-size: 14px;
    }
    
    div.x1 input{
        width: 25px !important;
        height: 25px !important;
    }
    
    div.x2 label{
        align-items:flex-end!important;
        font-size: 14px;
    }
    
    div.x2 input {
        width: 18px;
        height: 18px;
    }