Remove FireFox focus ring from links on your site

Dragan Eror's picture

If you use Firefox web browser then you know about annoying dotted border around links when you click on them.
You can easy fix that thing if you carefully follow next few steps.

  1. Open new tab or new window in your Firefox

  2. In address bar type next

    about:config

    and pres enter

  3. You will see warining page. Something like this

    firefox about config warning

  4. click on button “I'll be carefull, I promise!

  5. find “browser.display.focus_ring_width” property and set value from “1” to “0

  6. That's it! Now restart Firefox, but important thing is... Do not use “Save and Quit” option. They will save your earlier setting. Because of that just “Quit” and start again.

Remove focus ring using css

Easy css trick to remove dotted border around links in FireFox on your web site
Just in your style sheet write next css property and you will remove focus rings from all links on your site!

  1. a:focus {
  2.     outline-style:none;
  3. }

Comments

Anonymous's picture

THANK YOU

I needed the answer! Thank you so much for explaining it, especially in the simplest way. I've never done ANYTHING like that before. I don't know anything about code - all I know is that focus ring is annoying as heck!

Also - this worked on my Seamonkey Browser, which I guess is similar to Firefox.

Thank you VERY much!

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.