CSS自定义复选框

<style>
      /* 使用label替代复选框样式 */
      #color-input-red + label {
        display: block;
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: absolute;
        top: 2px;
        left: 15px;
        background: rgba(240, 84, 77, 1);
      }
      /* 选中的样式 */
      #color-input-red:checked + label::before {
        content: "\2714";
        text-align: center;
        font-size: 16px;
        color: white;
        display: block;
      }
      /* 隐藏复选框 */
      input[type="checkbox"] {
        visibility: hidden;
      }
    </style>

HTML：

<input id="color-input-red" type="checkbox" />
<label for="color-input-red"></label>