SOURCE

  
<label>
  <input type="checkbox" />
  Checkbox 2
</label>

<label style="color: teal">
  <input type="checkbox" />
  Checkbox 3
</label>

<label>
  <input type="checkbox" disabled checked />
  <input type="checkbox" disabled />
  Disabled
</label>

[type="checkbox"] {
    --checkmark-svg: url('https://api.iconify.design/feather:check.svg');
    --indeterminate-svg: url('https://api.iconify.design/feather:minus.svg');
    --current-color:#fff;
    display: inline-block;
    height: 14px;
    width: 14px;
    position: relative;
    cursor: pointer;
    appearance: none;
    color: var(--current-color);
    border: 1px solid  var(--current-color);
    background: #8a7c7c;
    border-radius: 0.25rem;
    &:disabled {
        cursor: not-allowed;
        color: GrayText;
    }
    &::before {
        content: "";
        position: absolute;
        inset: -0.75rem;
        border-radius: 50%;
        transition: background-color 200ms;
        @media (pointer: coarse) {
            inset: -1.25rem;
            --hover-background: transparent;
        }
    }
    &:enabled:where(:hover,
    :focus-visible) {
        outline-offset: 1px;
        &::before {
            background-color: var(--hover-background);
        }
    }
    &:checked::after,
    &:indeterminate::after {
        content: "";
        position: absolute;
        inset: 0;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 1rem;
        background-color: currentColor;
    }
    &:checked::after {
        mask-image: var(--checkmark-svg);
    }
    &:indeterminate::after {
        mask-image: var(--indeterminate-svg);
    }
}

label {
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}