Bug 253463 - text-indent does not affect the selected file label for file inputs
Summary: text-indent does not affect the selected file label for file inputs
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified macOS 13
: P2 Normal
Assignee: Aditya Keerthi
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2023-03-06 14:04 PST by Karl Dubost
Modified: 2024-03-11 17:19 PDT (History)
5 users (show)

See Also:


Attachments
testcase for input with a shift (405 bytes, text/html)
2023-03-06 14:04 PST, Karl Dubost
no flags Details
rendering in safari, firefox, chrome (119.28 KB, image/png)
2023-03-06 14:05 PST, Karl Dubost
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Karl Dubost 2023-03-06 14:04:21 PST
Created attachment 465322 [details]
testcase for input with a shift

One of the techniques used by people for hiding the default text of an input is to use `text-indent` with a large negative number to put it outside of the page.

    <input type="file"
           name="Filedata"
           style="text-indent:-50px; outline:1px solid red;margin-left:100px">

When no file is selected, browsers will show a variation of:

* "Choose File" button
* No file selected

When using `text-indent`

Firefox and Chrome:
1. indent both texts (button and no file selected)by pushing them to the left side.
2. hides every texts (button and no file selected) out of the input box


Safari:
1. indent only the button but let the no file selected in place
2. doesn't hide the button and the no file selected stays visible

It creates issues on the daum.net website in the cafe section for the upload button.

rdar://105223868
Comment 1 Karl Dubost 2023-03-06 14:05:04 PST
Created attachment 465323 [details]
rendering in safari, firefox, chrome
Comment 2 Karl Dubost 2023-03-06 14:31:36 PST
Animation to better see what is happening.
https://codepen.io/webcompat/pen/wvEqmKW
Comment 3 Aditya Keerthi 2024-01-09 15:11:10 PST
Pull request: https://github.com/WebKit/WebKit/pull/22554
Comment 4 EWS 2024-01-09 20:36:47 PST
Committed 272837@main (9ea2d325ad2d): <https://commits.webkit.org/272837@main>

Reviewed commits have been landed. Closing PR #22554 and removing active labels.
Comment 5 Aditya Keerthi 2024-01-09 20:49:43 PST
Remaining interop issue with overflow is tracked here: webkit.org/b/267299
Comment 6 Thomas Wisniewski [:twisniewski] 2024-03-11 13:23:15 PDT
Would it be possible to get web platform tests written up for these bugs?
Comment 7 Karl Dubost 2024-03-11 17:19:32 PDT
Thomas,
I created https://github.com/web-platform-tests/wpt/issues/45046