[css-forms-1] Define pseudo element for textarea resizer

[lukewarlow]

Currently there's no pseudo-element for the resizer in the textarea elements, we should define one (and probably improve it).

[schenney-chromium]

What aspects of the appearance would be stylable? There's the obvious color and maybe background-color, but then what?

Would just supporting an image do the trick?

[lukewarlow]

Consistent rendering would be needed, it's not actually always shown in browsers right now. For example iOS Safari doesn't iirc.

Another thing is how it responds to dark mode. Right now there's issues across browsers with contrast.

The handle isn't big enough to meet wcag touch target requirements for example.

It may even be that the current resize UI should be rethought entirely (possibly the edges should be the drag handles rather than a standalone pseudo?)

[nt1m]

I originally held off from adding this, mainly because of this:

It may even be that the current resize UI should be rethought entirely (possibly the edges should be the drag handles rather than a standalone pseudo?)

Perhaps we could add some intermediate ::corner-resizer or ::resizer(corner) pseudo-element though until that happens. ::resizer would probably cause name clashes if a different type of resizer is added.

[SebastianZ]

FWIW, a resizer is also shown if an element is a scroll container and the resize property is set to something else than none.
So the pseudo-element should also target that use case.

Sebastian

[mfreed7]

+1 to supporting a customizable "resizer". It would also be good to just include <textarea> in https://drafts.csswg.org/css-forms/, since it's only peripherally mentioned in the Appendix.