How to trigger crossbrowser FOCUS an a element with a neat outline?

Question

See the fiddle: http://jsfiddle.net/stefek99/9m5NZ/1/ Get the source: http://pastie.org/3654715

Chrome 17: just works.

IE 9: you need to click twice on "click"

Firefox 11: you need to give focus on some other element and then "click" works.

Why is that? (tried everything, have no clue)

http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html you should update your id tag to start with letters — Huangism, Aug 14 '12 at 20:34

score 1 · Accepted Answer · answered Mar 23 '12 at 15:03

First of all return false; from your onclick handlers, otherwise browser may follow the link and decide to move focus elsewhere.

Watch out for "CSS resets" or similar which remove focus outlines. Add your own style:

:focus {outline: 2px solid blue;}

With those two modifications it works for me.

As for the "neatness" of the outline, that's up to the browser. WebKit has special -webkit-focus-ring-color for this. Gecko supports -moz-outline-radius. For cross-browser style you'll need to roll your own (try border-image).

`return false` - it was so easy! Thanks also for hint with styling. — Mars Robertson, Mar 23 '12 at 15:26

How to trigger crossbrowser FOCUS an a element with a neat outline?

1 Answers1