Thoughts on adding cursor: pointer here? I know it's not required, but compared to .form-control on textual inputs, where the cursor changes to indicate interactivity, there's no change here.

Thoughts on adding cursor: pointer here? I know it's not required, but compared to .form-control on textual inputs, where the cursor changes to indicate interactivity, there's no change here.

this old chestnut again ;)

as we do it on buttons by default, sure. also worth adding the <input type="color"> ?

Thoughts on adding cursor: pointer here?

Fine by me. Only on the button or the whole input?

everything that's clickable, so the whole thing i'd say

also, good work on this btw. looks/works nicely

Ok, should we add hover states? If yes, what kind of hoverstate? Shading the button background color maybe?

I've added a subtle hover state

@MartijnCuppens this is amazing. Love the little hover state.

There's some padding issue in Firefox 82 on Ubuntu.

@alecpl,
Nice catch
That seems to be caused by these 5px:
https://searchfox.org/mozilla-central/rev/0b7007a23bc16c857f894140e12f307bfeef2fdd/layout/style/res/forms.css#494

I've now added a -moz-margin-end property to compensate these 5px.

I zoomed in a bit and detected the error. Here, it was caused by the min-height rounding. Do you guys still have this issue when you remove min-height from the file input?

@MartijnCuppens Doesn't seem to change anything, sadly. But maybe changing it in the devtools is not the best way?

I've found a fix: .form-control::file-selector-button { font-family: inherit; }. It can be also font-family: unset.

Also going to cross reference that #31993 fixes the issues @alecpl mentions here.

@mdo, #31993 does not fix my issue, need the font-family:inherit fix mentioned in my previous comment.

A few more words about the issue. Looks like firefox does not inherit font-family on the file input button from the input. It needs to be told to do so explicitely. Without the fix the computed font-family is "Noto Sans" on my computer. This font's line-height is 1px higher than what I get when I add the inherit rule.

Very nice finding @alecpl, I confirm it solves the issue.

We should find some reference to document this behaviour, either a bugzilla link or something… The MDN page for ::file-selector-button does not mention this but made me notice the need for ::-webkit-file-upload-button version too: does Autoprefixer handles this one?

• Current spec discussion
• (!) Bugzilla updated 23 days ago
• My findings: I guess it relates to how the font is set: see how the pseudo element gets -moz-button font-family directly?) however it should apply to every Firefox > 82 out there, which rolled out only a few days ago.

Edit: x-ref Bugzilla

FWIW the bug I filled against Firefox got a very clear explanation (mainly, this pseudo-element should look like a button like it always did, not like an input).

I guess this "fix" @alecpl found could move to our reboot, and maybe suggested to Normalize and friends.

We should find some reference to document this behaviour

It's shadow DOM, so all properties are reset to the default behaviour. So basically we should keep in mind these things need to re-reset (font size seems to be inherit by default though):

#31993 seems to be unrelated, for the issue @alecpl reported, but does seem to fix issues with errors in rounding when zoomed in/out which resulted in the same issue visually.

Thanks for the fix @alecpl, this was indeed needed, not only for FF, but also for Chrome (see https://codepen.io/MartijnCuppens/pen/yLJpmvE?editors=1100)

Hmm yeah, maybe we should indeed move this to reboot, I'll fix that

Ok, fixed the font-family (and all other font related properties) inheritance and also reported the 5px thing with Firefox, so we might be able to remove that dirty fix we now have in the future (https://bugzilla.mozilla.org/show_bug.cgi?id=1673895).

It's shadow DOM, so all properties are reset to the default behaviour.

Not really, as you may see in Firefox sources I linked earlier: https://hg.mozilla.org/mozilla-central/rev/ff6c38ffa425#l7.104 — only a few properties are set (and for example ::placeholder does not require anything to inherit the font).

But that was fun to search, and a very nice PR! Great job @MartijnCuppens 💯

Shipped 🚢

I'll keep an eye on https://bugzilla.mozilla.org/show_bug.cgi?id=1673895 if FF is planning to change how they set their spacing

That's amazing @MartijnCuppens nice work 👍