It's an annoyance that I want to get rid of.

Hyperlink elements that get selected in firefox (perhaps other browsers? I don't know) get a dotted border around them when they are selected.

Most of the time this is only slightly annoying. However, it's more of a pain when I want to significantly style my hyperlink elements.

I've tried overriding the style with "a:active: border o;", but this doesn't seem to do anything.

I get this problem in ff5 and IE8. Not in IE9 unless in compatibility mode.

How do I get rid of this particular default styling?

2 answers

Ktash 1851
0
points
This was chosen as the best answer

It isn't a border and is instead an outline. So, to solve this, you can do:

a, a:focus {
    outline: 0px;
}

You can check out more info on the issue here.

Answered almost 8 years ago by Ktash
  • That's why I linked to the article. It discusses (albeit briefly) that this is an accessibility feature, and it recommends changing it only, not removing it. This can be removed in favor of other methods of accessibility highlighting that fit better with the style of the page. In my opinion. Ktash almost 8 years ago
0
points

What you're seeing is "outline" -- a feature intended for usability when "tabbing" with the keyboard or using simple devices like mobile handheld scroll ball, etc. The outline is the only thing that indicates to a user that an element is in that "active" or "focused" state for hyperlinks, input fields and other objects you can interact with.

Removing so completely is not only indicates that you're a total control freak :), but also lowers the usability of your web page dramatically. There are good solutions for this though! Check this out: http://stamatiskritikos.com/2010/01/03/remove-dotted-outline-vs-accessibility/.

CSS to turn it off completely is:

a, a:link, a:visited, a:focus, a:hover, a:active { outline:none; }
Answered almost 8 years ago by Gary Hepting