im sick of seeing those giant default checkboxes that look nothing like the rest of the ui. its so hard to make them actually match your brand colors without breaking everything. im trying a little experiment this week using appearance: none and custom svg backgrounds instead of the usual hacky way.
input[type="checkbox"] {appearance: none;background-image: url('check.svg');}works fine on desktop but it breaks the tap area size on mobile safari sometimes.
easy annoying fix if you forget to set a min-width. lets see if anyone has a clean way to handle the checked state without adding extra css bloat.