@ou-imdt/css/src/native/input-checkbox-radio.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

:root,
:host {
    /* Input:Checkbox && Input:Radio (ternary refers to both) */
    --ternary-accent: var(--accent);
    --ternary-width: 1em;
    --ternary-aspect: 1/1;
    --ternary-vertical-align: middle;
    --ternary-outline: none;
    --ternary-focus-shadow: 0px 0px 0px 1px var(--bg1), 0px 0px 0px 3px var(--core1);
    --ternary-focus-visible-shadow: 0px 0px 0px 1px var(--bg1), 0px 0px 0px 3px var(--core1);
    --ternary-outline: 0;
    --ternary-focus-border: 2px solid var(--accent);
    --ternary-focus-visible-border: 2px solid #000000;
    --checkbox-radius: 2px;

    --ternary-disabled-opacity: 1;
    --ternary-disabled-bg: #E6E6E6;
    --ternary-disabled-fg: #999999;
}


input[type="radio"],
input[type="checkbox"] {
    width: var(--ternary-width, 1em);
    aspect-ratio: var(--ternary-aspect, 1/1);
    accent-color: var(--ternary-accent, initial);
    vertical-align: var(--ternary-vertical-align, middle);
    outline: var(--ternary-outline, none);
    border-radius: var(--checkbox-radius);
    border: none;
    margin-block: 0;
    min-height: initial;
    min-width: initial;
}

input[type="radio"]:focus:after,
input[type="checkbox"]:focus:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: var(--ternary-focus-border, none);
    box-shadow: var(--ternary-focus-shadow);
    border-radius: var(--checkbox-radius);
}

input[type="radio"]:focus-visible:after,
input[type="checkbox"]:focus-visible:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: var(--ternary-focus-visible-border, none);
    box-shadow: var(--ternary-focus-visible-shadow);
    border-radius: var(--checkbox-radius);
}

input[type="radio"]:focus:after,
input[type="radio"]:focus-within:after {
    border-radius: 100%;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled,
input[type="checkbox"][aria-disabled="true"],
input[type="radio"][aria-disabled="true"] {
    opacity: var(--ternary-disabled-opacity);
    background: var(--ternary-disabled-bg);
    color: var(--ternary-disabled-fg);
}