Implement accent-color instead svg?

[krystian3w]

Ducumentation

• https://drafts.csswg.org/css-ui-4/#widget-accent

• https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color

• https://chromestatus.com/feature/4752739957473280

Support status in popular service

• https://caniuse.com/mdn-css_properties_accent-color

Now works with:

• Firefox 92+ (but not in 91.x ESR)
• Chrome 93+
• Opera 79+

Note:

As fallback can by used CSS @supports.

@supports (accent-color: var(--checkbox-checked-ink)) {
    /* for only Firefox 92+, Chrome 93+, Opera 79+ */
    .checkbox > input[type="checkbox"] {
        accent-color: var(--checkbox-checked-ink);
        opacity: 1
    }
    .checkbox > input[type="checkbox"] + svg {
        display: none
    }
}

[gorhill]

uBO does not use the visuals of native checkboxes because they look too different across browsers and OSes, the accent-color property wouldn't solve this.