gmx.css/src/_form.css

A micro Material Design 3 based CSS-only framework.

.checkbox,
.radio {
    display: inline-block;
    position: relative;
}

.checkbox:not(:last-child),
.radio:not(:last-child) {
    margin-right: .75rem;
}

.checkbox input,
.radio input {
    appearance: none;
    width: 2.25rem;
    height: 2.25rem;
    position: absolute;
    margin: -.35rem -.45rem;
    border-radius: var(--m3-util-rounding-full);
    background: transparent;
    transition: .1s;
}

.radio input {
    margin: -.375rem -.5rem;
}

.checkbox:hover input,
.radio:hover input {
    background: rgb(from var(--m3-scheme-primary) r g b / 10%);
}

.checkbox span,
.radio span {
    position: relative;
    cursor: pointer;
    padding: 0 .115rem;
}

.checkbox span:before,
.radio span::before {
    content: '';
    appearance: none;
    background: transparent;
    border: .15rem solid currentColor;
    border-radius: var(--m3-checkbox-shape);
    padding: .45rem;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: .5rem;
}

.checkbox input:checked+span:before,
.radio input:checked+span:before {
    background: var(--m3-scheme-primary);
    border-color: var(--m3-scheme-primary);
}

.checkbox input:checked+span:after {
    content: '';
    display: block;
    position: absolute;
    top: .3rem;
    left: .5rem;
    width: 4.75px;
    height: .7rem;
    border: solid #ffffff;
    border-width: 0 .1em .1em 0;
    transform: rotate(45deg);
}

.radio span::before {
    border-radius: var(--m3-radio-shape);
    padding: .3rem;
    border: 4px solid transparent;
    outline: .15rem solid currentColor;
}

.radio input:checked+span:before {
    border-color: var(--m3-scheme-surface-container);
    outline-color: var(--m3-scheme-primary);
}