CSS Tip: Remove Link and Form Field Outlines

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 {

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.

  • http://stevenclark.com.au Steven Clark

    Matt, if I understand you correctly, that dotted outline is very handy for tabbed browsing. It’s very hard to tab around an interface with these cues suppressed. But I may have read this wrong. From an accessibility / usability angle I’d suggest leaving this dotted outline behaviour, rather than over-riding it to improve “visual design”. Just my 2 cents…

  • http://www.webmaster-source.com Matt

    Steven, what I was referring to when I mentioned tabs was something like, on ProBlogger.net, the “best of ProBlogger” box. As it’s set-up currently, outline:none is in use on the buttons, so when you select the javascript trigger you don’t get the outline, whereas you would have a “focus” outline remaining around the trigger if the attribute was not in use.

  • nhoss2

    hey, I will be using some of this, I went on my to test one of my sites using the mac’s safari and when i clicked on the search form it was highlighed blue and that looked really ugly with the disign of my site so this will be quite helpfull. thanks