Give authors the ability to style form validation messages

[bramus]

In this tweet, the author asks for this functionality.

Css really needs to be able to style this browsers popups with an error messages in inputs.

Seems like a reasonable request. I'm thinking of a pseudo-element ::validation-message.

[emilio]

Part of the issue (at least on Firefox's side) is that these popups live in a different process from the page (so we hit the same issues that limit styling of <select> options).

That said, there may be an argument to be made about these messages escaping the page's viewport not being so critical, and I know we've discussed moving them to the page's process at least once. Maybe these days they could just be user agent top layer magic or so... cc @smaug----.

[smaug----]

With <select> is was trivial to find examples where a small iframe is used to show just the select element. I would expect the same here. So if a cross origin iframe has a simple form and you need to show validation message, where should that message live?

[simevidas]

Just being able to set font-size: inherit or font-size: 1rem would go a long way. Currently, it’s impossible to increase the text size of error messages (AFAIK).

[fantasai]

Some related CSSWG discussion: https://lists.w3.org/Archives/Public/www-style/2023Sep/0020.html

[svgeesus]

Which current CSS spec, if any, does this fit under? I wasn't sure, else I would have labelled it.