March 5, 2007

Mozilla’s focus box

You will find other articles relevant to this document in these sections:
Richard Lee @ 9:48 am

Ever found in Firefox that strange dotted outline that appears when you click a link? I’ve always thought it was just one of those things that couldn’t be fixed, until recently:

a:focus {
 
-moz-outline:0;
 
}

As pointed out by AD (below) this “strange dotted outline” I mentioned yesterday is indeed a focus box - which for accessibility reasons should not be removed - However if you wish to remove the unexpected elongated focus box in Firefox which appears when you click a link on a horizontal list menu this is a quick and dirty solution:

#menu li a:hover, #menu li a:active {
 
-moz-outline:0;
 
}

Thanks for pointing that out Ad ;)

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg
  • Furl
  • Reddit
  • YahooMyWeb

2 Comments »

  1. That “strange dotted outline” is there for a reason - when keyboard-only users tab through your page the outline helps them to determine which link is currently focused. Removing this outline will be a usability disaster for these users!!

    Comment by AD — March 5, 2007 @ 11:11 pm

  2. UPDATE - the same thing using a valid CSS property:

    #menu li a:hover, #menu li a:active {
 outline: none;
}

    Comment by Richard Lee — March 13, 2007 @ 9:39 am

RSS feed for comments on this post. TrackBack URI

Leave a comment