Closed Bug 1635675 Opened 4 years ago Closed 4 years ago

[css-pseudo] implement ::file-chooser-button


(Core :: CSS Parsing and Computation, enhancement)




Tracking Status
firefox78 --- fixed


(Reporter: roy-orbison, Assigned: emilio)



(Keywords: dev-doc-complete)


(1 file)

Webkit has ::-webkit-file-upload-button, IE has ::-ms-browse, leaving Gecko/Quantum as the only major rendering engine without the ability to style the button component of the <input type=file> control.

::-moz-file-upload-button would be great for platform parity. I know there are workarounds using <label> that can still render any button one likes, but they rely on script to parse the selected filename(s) and insert them into the DOM. It's not a clean solution compared to the native control.

This would be better as a feature request to the CSS Working Group:

This is relatively simple to add, but we try to avoid adding new vendor-prefixed things to the platform.

Looks like there was no objection from the working group! The name may be a bit under discussion so I'll only enable it on nightly / beta until the dust settles a bit.

Assignee: nobody → emilio
Ever confirmed: true
Summary: No CSS pseudo-element for file input buttons → [css-pseudo] implement ::file-chooser-button

As per

Don't enable it unconditionally just yet, as the name may change, and I
need to write an intent email :)

James, the WPT lint is angry at me because I didn't include a link to a spec in a reftest. But there's no spec (yet) and the test has .tentative.html in the name. Do you know how should I proceed here?

Flags: needinfo?(james)
Depends on: 1639852

The lint is no longer grumpy about the lack of a link.

Flags: needinfo?(james)

Or, I guess that's true upstream but not yet in m-c. If this is blocking you and the sync is too slow to wait for I can cherry-pick that commit into central (guess the sync will be a couple of days at least).

I can wait, I need to wait for bug 1639852 to get reviewed first. Thanks!

Pushed by
Implement the ::file-chooser-button pseudo-element. r=jwatt
Created web-platform-tests PR for changes under testing/web-platform/tests
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
Upstream PR was closed without merging
Depends on: 1640601
Flags: needinfo?(emilio)
Attachment #9150575 - Attachment description: Bug 1635675 - Implement the ::file-chooser-button pseudo-element. r=#style → Bug 1635675 - Implement the ::file-chooser-button pseudo-element. r=jwatt
Pushed by
Implement the ::file-chooser-button pseudo-element. r=jwatt
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla78
Upstream PR merged by moz-wptsync-bot
Blocks: 1662478

I have updated BCD to rename the -webkit version, and add that as an old name for this standardized pseudo.

Also moved the property page, and added examples of using the standard version, and standard version with a fallback of the -webkit version:

Blocks: 1673819
You need to log in before you can comment on or make changes to this bug.