Bug 224746

Summary: font-size property doesn't apply to file upload button
Product: WebKit Reporter: Vanita Barrett-Smith <vanita.barrett>
Component: FormsAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: akeerthi, cdumez, ntim, oliver.byford, simon.fraser, webkit-bug-importer, wenson_hsieh, zalan
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: Mac (Intel)   
OS: macOS 10.15   
See Also: https://bugs.webkit.org/show_bug.cgi?id=238803
Attachments:
Description Flags
HTML example (alternative to CodePen) none

Vanita Barrett-Smith
Reported 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
Attachments
HTML example (alternative to CodePen) (653 bytes, text/html)
2021-04-19 03:36 PDT, Vanita Barrett-Smith 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Aditya Keerthi
Comment 1 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>).
Radar WebKit Bug Importer
Comment 2 2021-04-26 03:37:16 PDT
<rdar://problem/77146163>
Tim Nguyen (:ntim)
Comment 3 2023-01-07 23:28:03 PST
Bug 238803 would fix this, among with other issues!
Tim Nguyen (:ntim)
Comment 4 2023-01-10 17:38:12 PST
Bug 238803 fixes it. *** This bug has been marked as a duplicate of bug 238803 ***
Note You need to log in before you can comment on or make changes to this bug.