[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?

[noamr]

See also https://front-end.social/@kizu/111564320833361099 (@kizu)

[noamr]

I think this issue is bigger than stylable form controls... e.g. being able to pass a template that slots into scroll marker.
It takes the web platform in the direction of CSS-managed markup composition.
It could be a really interesting to pass a template, which gets slotted into a pseudo-element and gets some of its parameters propagate from outside.

It's a big undertaking though :)