Re: [csswg-drafts] Give authors the ability to style form validation messages (#7172)

A quick note down of a potential solution.

Define a new pseudo element `::error` (name tbd) which represents the validation error popup that shows. This can be implemented using anchor positioning and popover (much like `::picker(select)`). The text will default to what the browsers currently show but can be controlled via the content property. Using various state pseudo classes should be enough* to determine which text you want to display if you did want to override it statically, though you obviously could determine it in whatever way you wanted. E.g. setting a data-message attribute and using attr(data-message) in your CSS.

```css
::error {
   appearance: base; /*To enable a standardised error box?*/
   content: "Some custom text";
   display: none; /*Can be used to remove the standard box entirely, useful if you want rich content*/
}
```

Maybe also a new ::error::icon to control the icon that shows?

* Turns out there's not actually many pseudo classes related to input state see https://github.com/w3c/csswg-drafts/issues/1525 for possibly a step in that direction.

------------------

One thing that comes up is the desire to show these errors inline in the page. Like select listbox Vs combobox, where we might want author control of the behaviour. Perhaps a different appearance value? Perhaps a new property to control this?

We could also perhaps just have it so it's always in the Dom tree, and you can set display:block on it to make it visible (like you can a popover). Then you could make it so it's position: static and style it like normal?

Only issue then is how to make it so it only shows after validation runs and the browser decides it should render these. But perhaps that can be handled internally by the browser by default. But authors could make these render when :user-invalid?

Though the browser would move these into the top-layer when trying to open them, so that's probably not a good solution.



-- 
GitHub Notification of comment by lukewarlow
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7172#issuecomment-2702014665 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 5 March 2025 20:39:50 UTC