[css-forms-1] Pseudo elements and SVG for form controls

[jpzwarte]

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?