Hide dotted lines around links on focus or active

6.2.10
First thing you should be aware of is that, it is never recommended to remove outline on active or focused links. The reason is that it will decrease accessibility which in fact is a big thing.

Let people who prefer keyboards, or having no mouse not blame you for reducing default accessibility settings. But if you are aware of what you are doing here is how.



for Internet Explorer 5.5+

<a href="ad.html"hidefocus="hidefocus" target="_blank">Advertisement<a>

This can be injected with javascript/jquery if you don’t want to add extra this extra attribute to all links in HTML.

Javascript

for (x = 0; x < document.links.length; x++)document.links[].setAttribute(‘hidefocus’, ‘hidefocus’);

JQuery$('a').attr("hideFocus", "hidefocus");


For Firefox and CSS 2 supported browsers.

a:focus, a:active,a{outline:none}

If you care about Accessibility but want to remove a badly rendered outline you can use an alternate style for focus and active states. Following style can be useful in white background text links, but background won’t work for ‘ image links ‘.

a:active,a:focus{
outline:none;
background-color:#eee;
}

Some interesting points on outlines i came aacross.


Outlines do not take up space unlike borders.

Outlines don’t obey box structure always, check outline on absolute positioned element moved to right ~200px.

Outlines can be non-rectangular.

Outline Property accepts a color ‘invert’ which inverts ‘background-color’.

References

Removing the doted outline

A must read article on this issue . He discusses situations where we might need to disable ‘focus outline’ and recommends to use an alternate style for focused and active elements. A good and brief article.

Difference between CSS Outline and Border

If you wonder why such a thing called “outline” exists in a world where “border” can do the same thing, here is an article for you Read here

Related Posts by Categories



Widget by Hoctro | Jack Book