In most browsers, a dotted outline appears around links when they are clicked.
In some cases, this is annoying, such as with a JavaScript tabbed box or a graphical navigation menu. While it’s a minor issue, it still doesn’t look quite right…
Then you have Macs. In Apple’s Safari web browser, or any browser running under Mac OS X, when you click inside a form field to start typing, a glowing blue outline appears around it.
While it’s a nice touch, it doesn’t always look quite right. If you style the form field with custom borders and background images, then it can look really odd.
Fortunately, there is a very simple workaround for both problems. One easy CSS attribute. It’s called outline:none;. Use it like so:
.selector {
outline:none;
}
You can apply it to a tags or input tags to fix both of the issues above. For links, use a selector such as a.class or #div a. For input fields, you would use input.class or #div input.
For some unexplained reason, Microsoft decided not to implement it in Internet Explorer, so your JavaScript tab links will still have the ugly focus outline in IE. So, in other words, the “real” browsers support the outline attribute.
