How can I remove the outline around hyperlinks images?

Question

When we use Text Replacement using CSS and give a negative test-indent i.e. text-indent:-9999px. Then when we click on that link the Dotted line appears like in the sample image below. What's the solution for this?

Answer 1

For Remove outline for anchor tag

a {outline : none;}

Remove outline from image link

a img {outline : none;}

Remove border from image link

img {border : 0;}

Answer 2

You can use the CSS property "outline" and value of "none" on the anchor element.

a {
outline: none;
}

Hope that helps.

Answer 3

For Internet Explorer 9:

a:active, a:focus { 
 outline: none; 
 ie-dummy: expression(this.hideFocus=true);
}

Source: http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a

Answer 4

Please note that the focus styles are there for a reason: if you decide to remove them, people who navigate via the keyboard only don't know what's in focus anymore, so you're hurting the accessibility of your website.

(Keeping them in place also helps power users that don't like to use their mouse)

Answer 5

There is the same border effect in Firefox and Internet Explorer (IE), it becomes visible when you click on some link.

This code will fix just IE:

a:active { outline: none; }.

And this one will fix both Firefox and IE:

:active, :focus { outline: none; -moz-outline-style: none; }

Last code should be added into your stylesheet, if you would like to remove the link borders from your site.

Answer 6

include this code in your style sheet

img {border : 0;}

a img {outline : none;}

Answer 7

I hope this is useful to some of you, it can be used to remove outline from links, images and flash and from MSIE 9:

    a, a:hover, a:active, a:focus, a img, object, embed {
    outline: none;
    ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
    }

The code below is able to hide image border:

    img {
    border: 0;
    }

If you would like to support Firefox 3.6.8 but not Firefox 4... Clicking down on an input type=image can produce a dotted outline as well, to remove it in the old versions of firefox the following will do the trick:

   input::-moz-focus-inner { 
   border: 0; 
   }

IE 9 doesn't allow in some cases to remove the dotted outline around links unless you include this meta tag between and in your pages:

     <meta http-equiv="X-UA-Compatible" content="IE=9" />

Answer 8

This is the latest one that works on Google Chrome

:link:focus, :visited:focus {outline: none;}

Answer 9

If the solution above doesn't work for anyone. Give this a try as well

a {
 box-shadow: none;
}

Answer 10

in order to Removing The Dotted Outline href link you can write in your css file:

a {
   outline: 0;
}

Answer 11

You can put overflow:hidden onto the property with the text indent, and that dotted line, that spans out of the page, will dissapear.

I've seen a couple of posts about removing outlines all together. Be careful when doing this as you could lower the accessibility of the site.

a:active { outline: none; }

I personally would use this attribute only, as if the :hover attribute has the same css properties it will prevent the outlines showing for people who are using the keyboard for navigation.

Hope this solves your problem.

Answer 12

Use Like This for HTML 4.01

<img src="image.gif" border="0">

Answer 13

I'm unsure if this is still an issue for this individual, but I know it can be a pain for many people in general. Granted, the above solutions will work in some instances, but if you are, for example, using a CMS like WordPress, and the outlines are being generated by either a plugin or theme, you will most likely not have this issue resolved, depending on how you are adding the CSS.

I'd suggest having a separate StyleSheet (for example, use 'Lazyest StyleSheet' plugin), and enter the following CSS within it to override the existing plugin (or theme)-forced style:

a:hover,a:active,a:link {
    outline: 0 !important;
    text-decoration: none !important;
}

Adding '!important' to the specific rule will make this a priority to generate even if the rule may be elsewhere (whether it's in a plugin, theme, etc.).

This helps save time when developing. Sure, you can dig for the original source, but when you're working on many projects, or need to perform updates (where your changes can be overridden [not suggested!]), or add new plugins or themes, this is the best recourse to save time.

Hope this helps...Peace!

Answer 14

-moz-user-focus: ignore; in Gecko-based browsers (you may need !important, depending on how it's applied)

Answer 15

I would bet most users aren't the type of user that use the keyboard as a navigation control. Is it then acceptable to annoy the majority of your users for a small group that prefers to use keyboard navigation? Short answer — depends on who your users are.

Also, I don't see this experience in the same way in Firefox and Safari. So this argument seems to be mostly for IE. It all really depends on your user base and their level of knowledge — how they use the site.

If you really want to know where you are and you are a keyboard user, you can always look at the status bar as you key through the site.

Answer 16

This works perfectly for me

a img {border:none;}

Answer 17

Any image that has a link will have a border around the image to help indicate it is a link with older browsers. Adding border="0" to your IMG HTML tag will prevent that picture from having a border around the image.

However, adding border="0" to every image would not only be time consuming it will also increase the file size and download time. If you don't want any of your images to have a border, create a CSS rule or CSS file that has the below code in it.

img { border-style: none; }

Answer 18

Yes we can use. CSS reset as a {outline:none} and also

---

a:focus, a:active {outline:none} for the Best Practice in Resetting CSS, The Best Solution is using common :focus{outline:none} If you still have Best Option please Share