Browser Trick : Remove the focus ring on Firefox

Something that annoyed me about Firefox was the dotted border / outline that appeared whenever you clicked things, like buttons or links. I've always wanted to remove it and I'm sure other people have too. I'll explain how you can remove this display feature via the config.


Type about:config in your address bar, it may ask for conformation, so click OK to proceed. In the search box write browser.display.focus, this should bring up a list of the focus attributes which we can modify.


Since we mainly want to get rid of this ugly little feature, go ahead and right click on browser.display.focus_ring_width to bring up the context menu. Choose modify, change the value to 0, and click OK. Start clicking some clickable things and you'll realize that there's no more ugly outline ! Except select boxes, NOOO !! I'm kidding, you just need to reset your browser for that to take effect.



Now if you like the focus ring a lot, there's some silly things that you can do, such as increase its size and apply it to all focusable elements. To apply the ring on all elements right click on browser.display.focus_ring_on_anything, click toggle, and you're set !! If you wanna increase its size, just modify browser.display.focus_ring_width again, but set it to a higher value, such as 3. Woaaah ! would you look at the size of that sucker now !!


I'm sure you may have noticed the focus ring colors for the background and text. To enable these, search browser.display.use_focus_colors, right click, choose toggle, and the colors should then be enabled. Awww.. isn't it pretty ?


There was also an option for the focus ring style, but I didn't notice any remarkable effects when modified. Anyway, I am once again satisfied with Firefox.. maybe I'll keep the pretty colors.

Looks useful Ange Thank You!