圆形复选框

html

      <input
        type="checkbox"
        class="circle-checkbox"
      />

css

/* 设置选中背景 */
      .circle-checkbox:checked {
        background: #1673ff;
      }

      /* 设置复选框样式 */
      .circle-checkbox {
        width: 25px;
        height: 25px;
        background-color: #ffffff;
        border: solid 1px #dddddd;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        font-size: 0.8rem;
        margin: 0;
        padding: 0;
        position: relative;
        display: inline-block;
        vertical-align: top;
        cursor: default;
        -webkit-appearance: none;
        -webkit-user-select: none;
        user-select: none;
      }

      /* 设置伪类，即显现的对勾样式 */
      .circle-checkbox:checked::after {
        content: "";
        top: 7px;
        left: 7px;
        position: absolute;
        background: transparent;
        border: #fff solid 2px;
        border-top: none;
        border-right: none;
        height: 6px;
        width: 10px;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }