[css-forms-1] Define pseudo element for file input label

[lukewarlow]

In CSS forms 1 only the file selector button of the file input has a pseudo element defined. It's quite commonly desired to control the file names label/description text too. We should define a pseudo element to access that.

The button is represented by ::file-selector-button we should have something for the file description next to it.

[lukewarlow]

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.

[mfreed7]

+1 to both comments here - these are very common developer requests. There might be security issues with the file name label though, e.g. allowing a site to misrepresent the file that was selected?

Also, what if a developer wants to replace the ::file-selector-button with their own custom element button?

[lukewarlow]

Also, what if a developer wants tO replace the ::file- selector -button with their
own custom element button?

How common is this?

Most customisations I've done in the past were essentially hiding the label entirely and then making the button an icon (like a paper clip) which I think the pseudo would allow provided I could set the content to an empty string (with an alt fallback value) and using background-image.

Alternatively we do have the showPicker() function so perhaps hiding this button and linking your own externally through that would allow the composition case? (if we added command="show-picker" you wouldn't even need JS). Obviously this kind of escape hatch shouldn't be the goal for common cases but the fact it exists is useful.

[lukewarlow]

allowing a site to misrepresent the file that was selected?

This is already doable today via various mechanisms?

[mfreed7]

Also, what if a developer wants tO replace the ::file- selector -button with their
own custom element button?

How common is this?

Most customisations I've done in the past were essentially hiding the label entirely and then making the button an icon (like a paper clip) which I think the pseudo would allow provided I could set the content to an empty string (with an alt fallback value) and using background-image.

Was going to respond here, but decided to open a specific issue instead:

#11929

TL;DR: It seems somewhat common for design systems to have a standard "button" component. And it also seems natural to want to use that component for all "buttons" that users see.

allowing a site to misrepresent the file that was selected?

This is already doable today via various mechanisms?

Yeah, that's a fair point I guess. So perhaps we also need a pseudo for the file display text field?

[lukewarlow]

So perhaps we also need a pseudo for the file display text field?

Yeah that's what this issue is tracking (unless there's two bits of text)?