Bug 224746 - font-size property doesn't apply to file upload button
Summary: font-size property doesn't apply to file upload button
Status: RESOLVED DUPLICATE of bug 238803
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Safari 14
Hardware: Mac (Intel) macOS 10.15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-04-19 03:36 PDT by Vanita Barrett-Smith
Modified: 2023-01-10 17:38 PST (History)
8 users (show)

See Also:


Attachments
HTML example (alternative to CodePen) (653 bytes, text/html)
2021-04-19 03:36 PDT, Vanita Barrett-Smith
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Vanita Barrett-Smith 2021-04-19 03:36:35 PDT
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
Comment 1 Aditya Keerthi 2021-04-20 13:29:22 PDT
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>).
Comment 2 Radar WebKit Bug Importer 2021-04-26 03:37:16 PDT
<rdar://problem/77146163>
Comment 3 Tim Nguyen (:ntim) 2023-01-07 23:28:03 PST
Bug 238803 would fix this, among with other issues!
Comment 4 Tim Nguyen (:ntim) 2023-01-10 17:38:12 PST
Bug 238803 fixes it.

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