Description
So as part of the CSS Forms 1 spec, i love that a lot of user-interface things are being exposed. Like ::picker-icon
in <select>
and ::checkmark
for <input type=checkbox>
. I'm unclear however how customizable those things actually are in practice.
One common practice for design systems is to provide a custom icon for those experiences, usually in the form of SVGs. Sometimes those icons are also animated, for example the <path>
of the checkbox when the state changes to :checked
.
One way today would be to use background: url("data:image/svg+xml.....");
for the pseudo element. The downside of that is that the SVG is not styleable via CSS. So using this technique, you wouldn't be able to animate it in the checkbox scenario.
Is there an existing issue for this that i'm missing?