The attached screenshot is from OS X/Firefox 3. Note that the center tab (an image) has a dotted line around it, apparently because it was the most-recently selected tab. Is there a way I can eliminate this dotted line in CSS or JavaScript? (Hmmm...the free image hosting service has reduced the size of the image. But if you could see it, you'd notice a dotted-line select area around the block.)
Screen Shot http://www.freeimagehosting.net/uploads/th.fadf78173b.png
You'll want to add the following line to your css:
a:active, a:focus { outline-style: none; -moz-outline-style:none; }
(Assuming your tabs are done using the a element, of course.)
[edit] On request from everyone else, for future viewers of this it should be noted that the outline is essential for keyboard-navigators as it designates where your selection is and, so, gives a hint to where your next 'tab' might go. Thus, it's inadvisable to remove this dotted-line selection. But it is still useful to know how you would do it, if you deem it necessary.
And as mentioned in a comment, if you are only dealing with FF > v1.5, feel free to leave out the -moz-outline-style:none;
In your onclick event, this.blur()
or, specifically set focus somewhere else.
For starters, try this
*,*:hover,*:focus,*:active { outline: 0px none; }
This will however decrease usability.
You'll want to selectively apply alternative effects where relevant to give people such as those whom navigate primarily with the TAB key have an idea of what currently has focus.
div.foo:active,
div.foo:focus,
div.foo:hover
{
/* Alternative Style */
}
using
*:focus {outline:0px;}
will remove styling for inputs and textareas when selected with the mouse. Make sure you append these styles with a border for these form items if you choose to remove all outlines on :focus.
You can start by looking at the :focus and :active pseudo classes, although you probably shouldn't be completely removing any formatting from these cases, since they are an invaluable usability aid.
