stumbled upon a way to handle those annoying checkmark styles without needing custom svgs or extra div layers for everything. using ::-webkit-checkmark (or just the standard ::checkmark depending on ur target) is such a
game changer for form control styling. it basically lets u tap directly into the checked state of elements like <input type='checkbox'>, radials, and even those tricky
<select>
dropdowns. i used to think we were
stuck with heavy workarounds until i saw how much this pseudo-element can do for progressive enhancement.
>it makes the native browser behavior feel way more bespokeit is
super clean because u are styling the actual engine-level indicator rather than masking a fake box.
it actually works on select menus too . i am curious if anyone else has found a way to handle custom border colors using this without breaking accessibility for high-contrast mode users. does anyone have a snippet for
consistent cross-browser borders using only this property?
link:
https://piccalil.li/blog/navigating-the-age-old-problem-of-checkmarks-in-ui-with-progressive-enhancement/?ref=main-rss-feed