Remove the dotted outline focus on links

Sometimes with site design in mind you need to remove the dotted outline focus box on some links. I do this normally for only a subset of links as the focus box just bugs me in terms of a sites look and feel.

At any rate this can be achieved in your CSS file for most browsers with the following two lines :-

Show Plain Text
CSS code
  1. a:focus, a:active {
  2. outline: none;
  3. -moz-outline: none;
  4. }

Like normal IE is a pain and requires the hidefocus attribute to be set to true :-

Show Plain Text
HTML code
  1. <a href="your link" hideFocus="true">Your Text</a>

I have set these properties on the Show Plain Text links on the code blocks.

On a different topic but I'll list if for reference, to remove the blue border on image links :-

Show Plain Text
CSS code
  1. img {
  2. border-style: none;
  3. }
Filed under: Design  Tags: Css

0 Responses to “Remove the dotted outline focus on links”

Sorry, comments have been closed for this post.