.black-checkbox {
    appearance: none;         /* Remove native styling */
    -webkit-appearance: none; /* Safari support */
    -moz-appearance: none;    /* Firefox support */
    width: 12px;              /* You control the size here */
    height: 12px;
    border: 1px solid black;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    vertical-align: middle;
    position: relative;
}

/* Checked state background and checkmark */
.black-checkbox:checked {
    background-color: black;
}

/* Custom checkmark */
.black-checkbox:checked::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
}