So you’re doing some clever Javascript and you have a link tag tag that you want to act as say a tab or a button, but when you click down on the link you get this ugly dotted border highlighting your selection!
No good. Spice up your CSS with a little…
outline-style:none;
outline-width:0;
and you’ll be living large with a more “tabular” or “buttonular” feel.
Ruby on Rails Dev
15 Comments
Or in 1 line.
a { outline: 0 none; }
One thing to keep in mind about the outline property is that it is an accessibility feature. When you tab through a web page the purpose of the outline is to show you where your cursor is.
Thanks for the comments! Both are great points.
Thanks for pointing this out Cary. Those dots were driving me nuts just last week.. didn’t know you could fix it with CSS!
I would suggest:
a:active { outline: none;}
It doesn’t interfere with the accessibility issue mentioned by Nathan.
I think you can also return false in your click event to avoid the dotted lines
t?kler
What is the code voor internet explorer? The CSS is only for firefox.
A small Google search, your article, a website fixed.
Thanks
>> “It doesn’t interfere with the accessibility issue mentioned by Nathan.”
The :active{} does interfere with keyboard accessibility; at least in modern browsers (e.g. Firefox3, Opera9.5 and IE8)
There is a JS way to remove the border without destroying usability – or better yet, style that “dotted border”.
For the guy who wanted the IE6/7 fix, see my write up on the subject: http://haslayout.net/css-tuts/view?tut=Removing-Dotted-Border-on-Clicked-Links
Cheers
I believe I’ve tried around 30 diff codes to eliminate this effect – I would now like to say : “Thank you Dave Shenk !”
P.S : Great site boys
So very, very handy… thanks guys. ELC rawks!
Thanks Cary Dunn
Hey dude, you are fabulous! Never thought a simple line would do that trick. Thanks from a starter!
Thanks Dave.
Thank You !