Prevent a Dotted Border around a Hyperlink when clicked in FireFox

I recently got bumped with a strange Link behavior. A user had a hyperlink which opened in a new page. When she clicked on it, a dotted border appeared around the Hyperlink as shown below:

image

I had seen this behavior a couple of times in the past but never thought of a solution until now. After trying a couple of solutions, what worked out was adding the following CSS to the page:

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Remove Dotted Border in FireFox</title>
<
style type="text/css">
a:focus {
outline: none;
}
</style>
</
head>
<
body>
<
a href="#" id="anchor1">Click Here</a>
</
body>
</
html>

I have tested the solution in Firefox 3.0 and above and after adding the CSS, the dotted border does not appear anymore when the link is clicked

image






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

10 comments:

Chris said...

Nice, and so simple. That's something that's always bugged me about Firefox.

Anonymous said...

Thanks for this, our current app had this problem in Firefox, this fix works a treat. A minor UI issue, but it makes the app look just that bit more polished. :)

Anonymous said...

Please don't do that, it can make it more difficult for users with disabilities to navigate the site without a mouse. Try setting the :focus style to look the same as the hover/active styles so people unable to use a mouse will still have a visual cue to navigate the site. See this:

http://www.allaccessblogging.com/link-focus.html

Suprotim Agarwal said...

Nice suggestion Anonymous and thanks for that link!

Chris and Anonymous - Glad you found it helpful.

Sumeet Chawla said...

Hey, Thanks a ton... This small highlighting border always irritated me a lot :P Thanks you, its gone now ;)

Anonymous said...

Sweet!

Unknown said...

Thank you very much - being new to CSS it would have taken me ages to figure out - thanks again :)

Anonymous said...

It does appear when I click the above image in my firefox

Mikey said...

This WORKS!

I've been looking for this for DAYS! Only tried 'border' and 'border-style' or specifying the border to 0px, but nothing worked.

It's clearly the 'outline' value that controls this pesky 1px dotted border!

One problem - you didn't do it for this tutorial!! Both the 'Click Here' images are styled the same.

You should apply the 'outline:none' to the second image, so people can see what's changed and that it works. Were I not so keen to try something new, I would have discarded this tutorial as there's no example of it actually working.

Great solution though! Well done and thank you!!

piyushwalia said...

thanx a lot....