Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Custom file input has no focus indication in Firefox
See original GitHub issueIt’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.
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
focus-visible - CSS: Cascading Style Sheets - MDN Web Docs
This selector is useful to provide a different focus indicator based on the user's input modality (mouse vs. keyboard).
Read more >WCAG: Firefox and Edge don't show outline on focussed input ...
The browsers show a focus indicator that is only a differently colored border, when entering a form element – as long as it's...
Read more >focus-visible - CSS-Tricks
The :focus-visible pseudo-class (also known as the "Focus-Indicated" pseudo-class) is a native CSS way to style elements that:
Read more >Managing focus in SVG - ally.js
In Blink and WebKit based browsers focusing SVG elements is not different from focusing an HTML element, the .focus() method is available on...
Read more >Cannot access "Select file to upload button" using keyboard
This change hides the input button without using display:none, ehuggett@c1e8424 and so you can tab to the upload button but without any kind...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1430196