ARTICLE AD BOX
The problem is that browsers (especially Firefox) add their own focus outline, even if you remove outline in CSS. So you were still seeing a focus ring on mouse click.
To fix it, you have to turn off both the normal outline and Firefox’s special focus styles. After that, :focus-visible will only show the outline for keyboard focus.
Example:
18.3k8 gold badges49 silver badges147 bronze badges
New contributor
Jiyan is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
5 Comments
2025-11-24T20:42:13.61Z+00:00
Can you explain what’s not working? The code actually works, check the demo in answer.
2025-11-25T03:57:48.427Z+00:00
I have checked the demo. But with this code outline is never coming both in Firefox and Chrome
2025-11-25T06:23:29.95Z+00:00
Just updated the answer, Now it's working fine
2025-11-25T07:46:30.797Z+00:00
I don't know why you removed the runnable inline example, but please don't - this way we don't have to rely on external sources for testing. Moreover, in your first answer variation, the external demo contained completely different code than the answer itself.
2025-11-25T09:28:53.97Z+00:00
