Removing Dotted Links
Designer Tips:
If you dislike this quirk as much as I do, you’re in luck. I will provide a few methods for squashing this bug as a web designer, and another tweak which will completely remove it from your browser’s default behavior by editing the CSS that controls the user interface.
First, let’s look at web design tricks. In your CSS document, just start out by putting this universal rule for all links:
a
{
outline: none;
}
Update: If you want to retain the dotted border for tab-based navigation, apply this to a:active. This still allows the indicator to appear when focused by keyboard, but hides when mouse activated. It’s the best of both worlds…
a:active
{
outline: none;
}
Also, another method involves universally targeting the :focus pseudo class specifically in Firefox. The CSS for his method is listed below.
:focus
{
-moz-outline-style: none;
}
The great thing about using outline: none; when designing is that other browsers that don’t mis-interpret the dotted border aren’t affected by it. IE6 still renders it, as does Firefox on Mac. Opera by default has no indicator.
Browser Tweaks:
CSS Validation is a big pet-peeve for me, which is why I opted to explore other options, and came up with the simple outline: none; method. This is the same syntax that we will use to tweak our Firefox installation on Windows, so that the border is gone for all websites.
Don’t worry, it is a very simple solution. Browse to: C:\Program Files\Mozilla Firefox\res\ua.css. Open the file in a code-editor that has line number, and scroll to line 123.
You Will See This:
:-moz-any-link:focus {
outline: 1px dotted invert;
}
Change It To This:
:-moz-any-link:focus {
outline: none;
}
Save the file and re-launch Firefox. That’s it, you’re done! Or, you can type about:config, then go to browser.display.focus_ring_width and set this value to 0.
Recent Comments