Quick Tip – Blurring Links

read 28 comments

Warning

Using JavaScript to blur clicked links is NOT recommended because it interferes with basic accessibility, especially for those using keyboard navigation or other assistive technologies

With all the fun new things you can do using jQuery and other JavaScript libraries, people are using links ("a" tags) for much more than sending users to a different page. One little annoyance I've found when using links for these events, though, is the little dotted outline that appears around the linked words upon clicking them and making them "active."

dotted link outline

Continue Reading Below

It makes sense to see the outline when clicking, but I don't want it to stay there.

In Firefox 1.5 and up, it's easy to get rid of the outline with a little CSS:

CSS:
  1. a:focus, a:active {
  2.   outline: none;
  3. }

Unfortunately, that doesn't work in Internet Explorer 6 and below (is anyone surprised?).

Wouldn't it be nice to get rid of the outline in every browser (as long as JavaScript is enabled, of course)?

jQuery to the Rescue

The trick is to take the focus off the link once it has been clicked, and jQuery makes that simple. In the jQuery Discussion List, Klaus Hartl offered this snippet, which works perfectly:

JavaScript:
  1. $('a').click(function() {
  2.   this.blur();
  3. });

Or, if you wanted to apply the blur only to links inside a DIV with an ID of "magic," for example, you could replace $('a') with $('#magic a'). If the blur should apply only to links with a class of "fun," the selector would change to $('a.fun'). See how easy? Give it a try:

click me and I won't show the ugly dotted outline

For this little demo, I gave the link a class of "fun" and put the above jQuery code inside $(document).ready() (For more on $(document).ready(), see Introducing $(document).ready() ). I also added return false; because I didn't want the link to take you anywhere.


comment feed

28 comments

  1. The topic of removing the focus halo has been discussed, and is a bad idea due to usability issues, re: http://sonspring.com/journal/removing-dotted-links#c001193

    Removing the blur via JavaScript is what I've always done since learning JavaScript but had a hard time getting the same effect (just learning jQuery) because blur() is a function. In the end someone in the IRC channel helped me and I found that the following worked well: $(this).get(0).blur();

  2. Klaus Hartl

    Hi there,

    instead of $(this).get(0).blur() just use this.blur(). It makes no sense to first wrap a jQuery object around this and then immediatly get the node back out again via get(0).

  3. Joey White

    Doesn't work on my Firefox 1.5.0.8 or IE 6.. at all.

  4. Joey, that's really strange, because I just double-checked it in IE6 and Firefox 1.5.0.7 for Windows and Firefox 2.0 for Mac, and it worked just fine. I see the outline while I click the link, but as soon as I release the mouse button the outline goes away, as desired.

    When you click on the link, does it take you to the top of the page? If so, you might have JavaScript turned off. Also, it won't work if you're testing it within most feed readers, as the feeds don't grab the javascript files.

  5. Failing in Firefox 2.0.0.1 on Windows XP. Outline is there, link does nothing.

  6. Hi Tim,

    I just tried it in Firefox 2.0.0.1 on Windows XP here, and it is working fine. The link should no nothing. The outline should go away.

    That said, I noticed that if I click and drag on the link, the outline stays. But a clean click—even a series of quickly repeating clean clicks—results in no outline.

    Could the failure be due to an inadvertent moving of your mouse?

  7. Just tried in a clean profile (DOM Inspector and Talkback), still doesn't work. Interestingly, if I tab to the link, the outline disappears when I hit Enter. No errors or warnings in the JS console.

    Wait -- my bad. The outline does go away, it's just there during mouseDown. I think I misread the intent of this technique. OK, it's all good!

  8. Phew! You had me scratching my head for a while there. Thanks for clearing that up. :)

  9. And thank you for the technique! The day after I found this article, I found a place to apply what I had learned.

  10. Alex

    This was exactly the proposed solution to the minor annoyance I was hoping to solve forever, and yet somehow Mac Firefox still places the dotted lines around the link when I click on it...

    the code is:


    a:hover, a:active, a:focus {
    color: #6699FF;
    outline:none;
    text-decoration:none;
    }

    #fulltext a, a:hover, a:visited, a:active, a:focus {
    color: #000000;
    outline:none;
    text-decoration:none;
    }

    So as you can see, I'm trying to create a link of out a text that stays looking as text, without really even showing that it is a link. The calm of the layout is thus ripped apart with those dotted lines...

    Help appreciated!

  11. Alex

    Solution. What I had done was ignore the use of any tags to denote the element (for which I wanted no outline) as text, so no or around the text. Odd though that this wasn't enough of an issue to prohibit the text-decoration:none from also not working... thanks again for the tip. -A

  12. H. Roberts

    For a completely validate and cross browser proof work-around go to my blog here

  13. H. Roberts

    Sorry, that was a dead link, try here

  14. Here's a clue - it wasn't working for me at first, either, then I remembered that I had to change my settings in NoScript. I have an add-on for Firefox called NoScript basically because I want to control the scripts I run - once I allowed scripts to be ran from your domain, the outline went away and the click event didn't return me to the top of the page.

    Works nicely. Well done.

    Thanks, this is about as useful as the <meta http-equiv="imagetoolbar" content="no"> tag in the header to get rid of IE's nasty, stupid image toolbar thingy that looks nasty when hovering over images on a page.

    Peace of Christ,
    (bs.)

  15. Derek

    new to this.

    what's the full code to implement this...?

  16. Hi Derek,
    Somewhere in the <head> of your HTML file, you'll need to include a reference to the jquery.js file and your custom script file. For example:

    <script src="/scripts/jquery.js" type="text/javascript"></script>
    <script src="/scripts/myscripts.js" type="text/javascript"></script>

    Then, in your custom script file, you can drop this in:

    //load the script when the DOM is ready
    $(document).ready(function() {
      // for any 'a' element with class="fun", 
      // take focus off of the link when it's clicked  
         $('a.fun').click(function() {
           this.blur();
            // do something else here
            // then stop the click from executing the default action
           return false;
         });  
    });

    Of course, you don't need the comment lines (the ones with //. I just put them in there to give you an idea of what is going on.

    Hope that helps!

  17. Derek

    got it!

    MUCH thanks!

    --DVO

  18. Mike

    Nice one! But how to get rid of outlines that appear when clicking on buttons (inputs)? Anyone has a clue?

  19. .KX

    If you don't want to see the focus outline, period - use this instead:


    $('a').focus(function() {
    this.blur();
    });

    • asllearner

      just want to say thanks...this is what I really wanted, to remove it altogether. I have found many possible solutions, plugins, etd. and this is so simple it boggles the mind.

      I am not breaking usability, by the way, because I am offering another signal (an image swap) whe nthe link is hovered, but the dotted line really looked awful...this is great.

  20. Thai Property

    Hi Admin,

    Have any demo ? i will see your code , cuz it hard to understand jQuery Code for me

    Thanks

  21. Hi Thai, look above for a link that says "click me and I won't show the ugly dotted outline." Click on it. That's the demo.

  22. Jake

    At post #2

    The accesibility thing is rubbish, tab through until you get the link and IT'LL show the dotted outline ¬.¬

  23. iDevGeek

    I use the link blurring on DHTML elements which shouldn't have the nasty box around due to their use as controls on various dynamic components.

    Example as jQ plugin:

    $.fn.nb = function() {
    return this.focus(function(){
    this.blur()
    });
    }

    Use:

    $('a.noblur').nb();

  24. asdasd

    alert('hello')Hello

  25. andy

    i have been fighting a this.blur issue with firefox that would cause another open window of firefox to come to the front when i even got near a js "a" item containing it.

    your code at top of page eliminated the need for this.blur() completely...

    thank you, thank you, thank you!!!

  26. josefk

    N0 - there are accessibility issues with removing the focus from active links - you have to be really careful. This technique can strand a screen reader user, who often navigate through a page by hopping from link to link. Blurring will cause the screen reader to loose its place on the screen - and the screen reader user will have to start navigating the page all over again.

    It's really annoying - as being primarily a visual artist, those dotted lines are very ugly - but until I can loose them without loosing focus and risk compromising accessibility, I don't feel I can use this method.

  27. Martin P

    $('.no-outline').mouseup(function(){this.blur()})

    I used "mouseup" instead of "click" because I want to keep the outline when using the keyboard for navigation.

    However, the outline still appears for a brief moment when clicking with the mouse, so I added this CSS:

    .no-outline:active{ outline: none}

    It works. Do you think there are any problems (accessibility/usability) with this?

2 Pings

  1. Get rid of the dotted lines around active links with 2 lines of css -or- javascript...

    ...

Sorry, but comments for this entry are now closed.