Bug 253463 – text-indent does not affect the selected file label for file inputs

• Component: Forms
• Status: RESOLVED FIXED

[Karl Dubost]

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

[Karl Dubost]

Created attachment 465323 [details]
rendering in safari, firefox, chrome

[Karl Dubost]

Animation to better see what is happening.
https://codepen.io/webcompat/pen/wvEqmKW

[Aditya Keerthi]

Pull request: https://github.com/WebKit/WebKit/pull/22554

[EWS]

Committed 272837@main (9ea2d325ad2d): <https://commits.webkit.org/272837@main>

Reviewed commits have been landed. Closing PR #22554 and removing active labels.

[Aditya Keerthi]

Remaining interop issue with overflow is tracked here: webkit.org/b/267299

[Thomas Wisniewski [:twisniewski]]

Would it be possible to get web platform tests written up for these bugs?

[Karl Dubost]

Thomas,
I created https://github.com/web-platform-tests/wpt/issues/45046