[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.

If 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 <input type="button"> but Firefox uses a <button>.

• ::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

[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.