Mobile Friendly Website

CSSPLAY

Doing it with style

CSS DEMOSRemoving dotted 'active/focus' borders from inline links

Date : 20th February 2007

For all modern browsers


Gogh, Vincent (Willem) van (b. March 30, 1853, Zundert, Neth.--d. July 29, 1890, Auvers-sur-Oise, near Paris), generally considered the greatest Dutch painter and draughtsman after Rembrandt.

The Starry Night

With Cézanne and Gauguin the greatest of Post-Impressionist artists. He powerfully influenced the current of
Expressionism in modern art. His work, all of it produced during a period of only 10 years, hauntingly conveys through its striking colour, coarse brushwork, and contoured forms the anguish of a mental illness that eventually resulted in suicide. Among his masterpieces are numerous self-portraits and the well-known The Starry Night (1889).

This text is an excerpt from The WebMuseum, Paris



Information

A few months ago, someone asked me if it was possible to remove the active/focus borders from inline links and I said no. But having thought about this some more I have found a way in which it can be done.

Whilst I would not advocate removing all indication that a link has been selected, I would agree that it would be nice to add your own styled active/focus state.

The above text contains several inline links which are obvious by the fact that they are underlined. Hovering over the links will give a removal of the underline. Clicking a link will give a change of background color but no dotted border.

This also works in IE and Firefox if you 'tab' though the links.

26th February 2007

Updated to use the method put forward by Merri which uses no repeated text.

21st January 2012

Non-IE browsers now support the style outline:none; to remove the border.


Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

  1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
    A support donation is now required for this demonstration.
  2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
  3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page