Skip to content

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

Open
@jpzwarte

Description

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions