Windows 10 reached EOS (end of support) on October 14, 2025. If you are on Windows 10, see this article.

تلاش سپورٹ

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

مزید سیکھیں
Open

How to disable Firefox's default focus rings

racecn replied
racecn

I am trying to test a site for its existing focus ring styles, but can't see them because firefox's added blue focus ring is covering them up. I also need to be able to see when there is no focus ring added by the site at all.

I have browser.display.show_focus_ring and browser.display.always_show_rings_after_key_focus

both set to false, no profile-wide css, no tampermonkey, or stylus files enabled.

I know that the color contrast is poor, but when testing I'd like to be able to see it without firefox plopping their blue one in the way of a quick visual check.

Thank you for any help here :D

I am trying to test a site for its existing focus ring styles, but can't see them because firefox's added blue focus ring is covering them up. I also need to be able to see when there is no focus ring added by the site at all. I have browser.display.show_focus_ring and browser.display.always_show_rings_after_key_focus both set to false, no profile-wide css, no tampermonkey, or stylus files enabled. I know that the color contrast is poor, but when testing I'd like to be able to see it without firefox plopping their blue one in the way of a quick visual check. Thank you for any help here :D
منسلک شدہ اسکرین شاٹٹس

تمام جوابات (2)

Try the pref browser.display.focus_ring_width and set it to 0 in about:config. That is the one that controls the width of Firefox's own focus ring; 0 hides it. I would do this only in a separate test profile, because it removes a useful accessibility cue for normal browsing.

If you still see an outline after that, it may be coming from the page CSS itself (:focus or :focus-visible), so DevTools > Inspector > force state can help check which rule is drawing it.

sagenuage81 said

Try the pref browser.display.focus_ring_width and set it to 0 in about:config. That is the one that controls the width of Firefox's own focus ring; 0 hides it. I would do this only in a separate test profile, because it removes a useful accessibility cue for normal browsing. If you still see an outline after that, it may be coming from the page CSS itself (:focus or :focus-visible), so DevTools > Inspector > force state can help check which rule is drawing it.

Hi! thanks for the reply here, browser.display.focus_ring_width did not seem to be a default variable in my install, and adding it with a value of 0 made no change either.

I know the site's default behavior is a certain focus ring as seen in the attached images, but firefox adds its own to any site/page I visit's controls. (the Chrome image just happened to be taken between cursor blinks, but that was a focused version of that input field)

racecn کی جانب سے میں ترمیمکی گئ

ایک سوال پوچھیں

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.