How to avoid the little dotted outlines on clicked hyperlinks

[jens1701]

Hello everybody, :)

if you click on a hyperlink to get to a new location, the klicked anchor element gets a dotted border before you make your way to the new location.

I wonder if there is a way to stop the appearence of this outline.

Anybody know something about that?

Greets :)

Jens

[gil davis]

It is an Accessibility feature that allows people to identify links as they use something other than a mouse to tab through a document. You really should leave it alone. However, if you insist, you can cancel the action:
<a href="..." onclick="this.blur()">

[WebJoel]

I tend to ignore these but isn't that "focus"?

a {}
a:link {}
a:visited {}
a:hover {}
a:focus {border:0 none; -maybe...??}
a:active {}

-eh? :)

edit:

I like Gil's answer... guess that is why I 'leave it alone'.. it is like messin' with people's scrollbars... it is an Accessibility thing and most people prefer them styled via OEM's chrome (let the browser do it)

[stormyeyedbear]

You could try using CSS to control the way your links appear.

You would essentially create a stylesheet, and include following styles that would control how the links appear depending on their hit state.
Note the style a:visited{text-decoration: none;}. The text-decoration attribute is set to none. This should eliminate the box that you are seeing around the link.

a:link { } - regular link
a:visited {text-decoration: none; } - regular link already visited
a:hover { } - any link with the mouse cursor currently over it
a:active { } - the split-second a link is clicked

Hope this helps. If not, there are plenty of sites that can provide CSS info. Just google for it.

[WebJoel]

I think that "a:active" is the equivelent of a "mouseDown" (requiring a pointer-tool with a physically-depressable key). For users of 'hotkeys' or other 'non-depressing pointer tools' (as is common with Accessibility software for the handicapped), "active" states aren't obeyed as well as "focus" states are. What springs to my mind are keypads that respond to a user's eye-movements to navigate.. (like Stephen Hawkings uses)..

[LeeU]

This should do it:

a {
outline: none;
}
You can also include this:

a:focus {
outline:none
}

[jens1701]

Hi

thank you all for your answers.

Well i do control the look of my site with css, and i got a :hover color change on all of my links, so i am able to visually tab my way through my site. I don't need the outline for this.
Interesting that the :hover selector works with tab like the :focus selector in firefox.

So i will work with the outline feature, and build a nice w3c compatible rule set. And than i have to write some javascript to have the same effect, because ie don't know outline, even the ie7. :eek:

This works:
:focus {outline: none; }


so this is solved! thx :)

Greets

Jens

[WebJoel]

outline:none! Oh... :p