Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom file input has no focus indication in Firefox #26563

Closed
alecpl opened this issue May 23, 2018 · 5 comments · Fixed by #29036

Comments

@alecpl
Copy link

@alecpl alecpl commented May 23, 2018

It's because the input element itself is hidden with opacity:0. However I think it would be possible with something like .custom-file-input:focus + label selector.

ps. I think position:relative on .custom-file-input is redundant.

@andresgalante

This comment has been minimized.

Copy link
Member

@andresgalante andresgalante commented May 23, 2018

@alecpl

This comment has been minimized.

Copy link
Author

@alecpl alecpl commented May 23, 2018

Indeed. It have to be some Firefox (59.0.2) issue. It works when I use developer tools, but not when I jump to the input using keyboard. Looking closer my notes about opacity and position are wrong. No issue in Chrome.

@ysds

This comment has been minimized.

Copy link
Member

@ysds ysds commented May 24, 2018

I have confirmed. Firefox ignores the input[type="file"]:focus. firefox input type file :focus bug

@alecpl

This comment has been minimized.

Copy link
Author

@alecpl alecpl commented May 24, 2018

And I've found a workaround: .custom-file:focus-within .custom-file-label. It will work with Firefox >= 52. Would be nice to have it in the next patch release.

@alecpl

This comment has been minimized.

Copy link
Author

@alecpl alecpl commented May 25, 2018

@mdo mdo added this to Inbox in v4.1.3 via automation Jul 9, 2018
@mdo mdo added the has-pr label Jul 9, 2018
@mdo mdo changed the title Custom file input has no focus indication Custom file input has no focus indication in Firefox Jul 9, 2018
@mdo mdo moved this from Inbox to Needs review in v4.1.3 Jul 9, 2018
@mdo mdo removed this from Needs review in v4.1.3 Jul 15, 2018
mdo added a commit that referenced this issue Jul 13, 2019
mdo added a commit that referenced this issue Jul 13, 2019
Fixes #26563, closes #26576, closes #29021.
XhmikosR added a commit that referenced this issue Jul 17, 2019
Fixes #26563, closes #26576, closes #29021.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.