(CSS?) Eliminating browser's 'selected' lines around a hyperlinked image?

Answer 1

In your onclick event, this.blur()

or, specifically set focus somewhere else.

Answer 2

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.

Answer 3

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;

Answer 4

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 */
}