Disable link highlighting

Question

Hey, im just wondering if it is possible to disable the "highlighting" you get when you click on a link. I want my link to behave as an image. In other words i dont want the highlighting box appear on click.

Answer 1

It can be done using CSS, by setting the outline of the link on focus:

a.image-link:focus { outline: 0; }

But you need to remember to always define an alternative style (such as changing color, or changing image background, to make the user know that it's being clicked). Else, DON'T DO IT!.

People who use keyboard to navigate rely on this outline to know which link they are focusing.

Answer 2

I assume you're looking to turn off the outline that browsers put around links when they're clicked. That would be:

a { outline: none; }

Answer 3

You also need to manage -webkit-tap-highlight-color, and you need to provide alternative styles, notably for users who navigate with the tab key and rely on highlighting of some sort to see where they are. So that gives...

<style>
a,a:hover,a:click, a:visited{
  border:none;
  outline:none;
  text-decoration:none;
  color:inherit;
  -webkit-tap-highlight-color: white;
}
</style>