Bug 224746 – font-size property doesn't apply to file upload button

• Component: Forms
• Status: RESOLVED DUPLICATE

[Vanita Barrett-Smith]

Created attachment 426404 [details]
HTML example (alternative to CodePen)

## What

When applying the `font-size` property to a file upload input, the font-size of the file upload button does not change. This happens even when applying the font-size property using the ::-webkit-file-upload-button selector.

Strangely, the font-size does change when the file upload has a background-color applied using ::-webkit-file-upload-button.

## Steps to reproduce

1. Open https://codepen.io/vanitabarrett/pen/qBRMPQw (or attached file) in Safari
2. The first file upload has the 'no file selected' text mis-aligned with the input button
3. The second file upload has the 'no file selected' correctly aligned and the file upload button font-size matches

[Aditya Keerthi]

Thanks for the report!

I'm also able to reproduce using an <input type=button>.

We've had this behavior for a long time, since the native rounded button style does not support variable sizes. It works when you specify a "background-color", since that drops us out of the native appearance. 

A workaround, if you do not require a native appearance, would be to specify "-webkit-appearance: none".

However, we could probably fix this by transitioning to the native square button style for larger font sizes (as we already do for <button>).

[Radar WebKit Bug Importer]

<rdar://problem/77146163>

[Tim Nguyen (:ntim)]

Bug 238803 would fix this, among with other issues!

[Tim Nguyen (:ntim)]

Bug 238803 fixes it.

*** This bug has been marked as a duplicate of bug 238803 ***