How to disable that onclick outline?

When I click an element, it shows the dotted line..

[craig1972]

I have an element of width 100 and height 100 that shows a line around it (dotted, ants type line) in Firefox and IE. In Opera this line doesn't show. I have the "outline: none" set in CSS but I wonder if all browsers support it yet.

Any idea how to supress this outline when an element is clicked?

[Tomness]

You could always set the outline to a colour that's not visable for the time being.

Pasting your css would give people more of a chance to help, maybe?

[sc112]

If you meant the dotted-line box around a hotlink when it was clicked, this is what I do to get rid of it - add

onfocus="if(this.blur)this.blur();"

to your <a> tag. That gets rid of the focus on the link.

[MatthewHSE]

To my knowledge, only Opera supports the outline property. Firefox will support it in 1.1. Will IE 7 handle it okay? Who knows?

I have read a post somewhere here on this topic but I haven't been able to find it. I'll post back with a link if I can come across it.

As far as usability is concerned, I wouldn't try to suppress that little annoying outline. Sure, it can mildly mess up the look of some pages, but folks are used to seeing it. If you take it away, you're risking losing some ease-of-use for some visitors.

<edit> Looks like sc112 and I cross-posted. His solution looks good to me. </edit>

[Robin_reala]

To follow on from MatthewHSE's post - he's corrent in saying that Opera and Firefox1.1+ support outline, but you can achieve the same affect in <Fx1.0 by using -moz-outline.

[craig1972]

Thanks SC112! That's exactly what I'm looking for! In my case, the outline was in fact a nuisance so all's well that ends well. It validates too! Love these forums.

[D_Blackwell]

onfocus="if(this.blur)this.blur();"

Is there a reasonable way to add this to all <a> in one crack?