[css-forms-1] Further define `::file-selector-button`

[lukewarlow]

Splitting from issue around file input label so this stuff doesn't get lost.

It would also be good to further define ::file-selector-button it currently doesn't let you use the content attribute to override the contents of the button. It also doesn't seem to work with ::before or ::after in any implementation despite being an element backed pseudo element which should support this based on my understanding.

See also #11856 for a very specific question unrelated to css forms.

[lukewarlow]

We should also define that this must be backed by a button element. (Turns out https://drafts.csswg.org/css-pseudo-4/#file-selector-button-pseudo does actually say it's a <button> but perhaps we need to be more clear about this.

Outdated about element backed pseudo-element

f browsers were to implement this correctly as an element backed pseudo element (which is relatively trivial to do in Chromium right now), there would still be interop issues. WebKit and Chromium use an `` but Firefox uses a ``.

• ::before and ::after don't work on input buttons in any browser, but do on real buttons.
• ::first-letter doesn't work on input buttons in any browser, but does on real buttons.
• ::first-line doesn't work on input buttons in Firefox, but does on real buttons.

I've opened a HTML issue just in case this is needs fixing there: whatwg/html#11130

Edit: so we decided not to make it element backed for now.

[ByteEater-pl]

Much of [css-forms-1] is currently HTML-specific. It should be agnostic, leaving it to host languages to define mapping of their selection of concepts to what they specify.

[lukewarlow]

I've realised even without file-selector-button being element backed there is room for interop issues depending of what we do regarding button layout in base appearance mode.

https://html.spec.whatwg.org/multipage/rendering.html#the-input-element-as-a-file-upload-control - here it says

The button is expected to use button layout and match the '::file-selector-button' pseudo-element.

But, button layout actually depends on the type of button: https://html.spec.whatwg.org/multipage/rendering.html#button-layout-2 Firefox uses a real button so it supports a display value of for example inline-flex, but chromium and webkit use input buttons and so won't support this.

This is already observable if you set this display on your file-selector-button, if your text is smaller than its container the text alignment is different between a button and input button.

I think we should just specify that this is a real button for the sake of simplicity. It will prevent us having any issues in base appearance.