Removing focus without this.blur()?

[Maximus - DFX]

Is it possible to remove that "focus" box that IE and NS7 put around links when you click them? Without using this.blur()?

[wontgetlost]

I personally have never heard of one, and since this post went all the way to the bottom without receiving any attention at all, my guess is that there is no other way.

This is just an educated guess though. :)

[joh6nn]

there are CSS ways, that to my knowledge, aren't currently supported by any browser.

[realisis]

Tomorrow I'm gonna kick myself for revealing these little snippets, but what the hell...

IE, as of version 5.5, has a proprietary attribute which hides that ugly focus-ring around *any* HTML element... all you have to do is state it in the relevant tag

eg:

<a href="rings_r_us.html" hideFocus>BUY OUR DIAMOND RINGS!</a>

...

As for Netscape 6.x, Mozilla 0.9.x +...

you can kill the the focus ring any number of ways... But all of them are just resourceful workarounds:

In these browsers, no rings appear around linked images, so if you add a 1px img somewhere in the link... NO RING!

***OR***

Nest other tags inside the link tag... for instance

<a href="norings.html"><div>CLICK ME NOW!</div></a>

(this may also work when embedding <b> or <i> or <font>, etc... experiment)

***OR***

embed some inline javascript within the link tag:

<a href="norings.html" onMouseover="window.status=' '; return true">STILL NO RINGS!</a>

I'm not sure this last one works in every instance....

...

And btw, Netscape 4.x and Opera 6.x don't display any rings to begin with, so these browsers are already covered...

...

Just a few tricks off the top of my head.... Cheers!

[brothercake]

you can use onmouseup

<a href="something.html" onmouseup="this.blur()">

but it errs in ns4, so you would need to discriminate

<a href="something.html" onmouseup="if(!document.layers){this.blur()}">

[Maximus - DFX]

looks like the most suitible way is <a href="#" hideFocus="hideFocus" onfocus="if(!document.all)this.blur()" onmouseup="if(!document.layers)this.blur()">Link 1</a> but that is probably not XHTML compliant. I also noticed the outline css prop but that doesn't work in any browser. I'm guessing that's what joh6nn was talking about. This way all the main browsers act the same. But... that's a lot of boring code. Anyway, thanks.

[jkd]

Originally posted by joh6nn
there are CSS ways, that to my knowledge, aren't currently supported by any browser.

CSS3 defines a user-focus property.

Mozilla implements it as -moz-user-focus until CSS3 UI becomes a Candidate Recommendation. It works in suppressing the outline, but also removes the ability to keyboard-focus it.

Also, in theory:

a:active {
outline: none;
}

Should also work...

[brothercake]

That's why I recommended using mouseup - that way the elements can still have the focus

[Maximus - DFX]

I understand your suggestion but if someone presses down the focus is there, I don't want it there at all. But thanks anyway.

[John_Saunders]

Just curious but why don't you want to juse use this.blur()?

The big issue to me is not which way to get rid of the focus box, but whether to do it or not to do it.

If you remove this, people who have their images turned off in their browsers, won't be able to see the links on your images.


John

[joh6nn]

when i mentioned the CSS that noone supports yet, i had actually been thinking of the outline attribute, and not the focus thing. to the best of my knowledge, trying to control the outline in even Moz does nothing. now, admittedly, i haven't tested this since 0.9.9, and it might have been fixed since then, but i know the lack of support hasn't been fixed in IE6 or Opera, so there's no sense in even trying to use it.

[jkd]

outline works fine in Opera 6.

It is implemented as -moz-outline in Moz until it is identical to the spec's version.

[Maximus - DFX]

Yes I knew you were talking about outine. Anyway, the reason I wanted some other solution is because IE doesn't do the "Active" color when you use this.blur() but NS6 and Opera 6 does... oh well... its not the biggest deal.

[realisis]

"because IE doesn't do the "Active" color when you use this.blur() but ..."

It's true: however if you set a hovercolor, this *will* be observed by IE, even while clicking on the link. So if hover is the same color as active, it might be an acceptable workaround for older (pre 5.5) IE browsers.

Anyway, that's why I suggested using hidefocus - the actual active color is maintained that way.

btw, it's simply hideFocus not hideFocus="hideFocus"

[Bosko]

No,it is hidefocus="hidefocus" if you are using it in a XHTML page.

[jkd]

Originally posted by Bosko
No,it is hidefocus="hidefocus" if you are using it in a XHTML page.

No, because hidefocus is not part of any XHTML dtd, therefore the page won't validate. It will however, be well-formed if you do hidefocus="hidefocus"...

[Bosko]

Well,thats what I meant,but if you are using IE propriatary methods (and thats the only way to remove the focus rectange in IE) then you cant expect it to be valid XHTML,but you could at least make it well formed.