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

User · Answer

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

User · Answer

This is the latest one that works on Google Chrome   link focus   visited focus  outline  none

User · Answer

If the solution above doesn t work for anyone  Give this a try as well  a    box-shadow  none

User · Answer

This works perfectly for me  a img  border none

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

include this code in your style sheet   img  border   0    a img  outline   none

User · Answer

-moz-user-focus  ignore  in Gecko-based browsers  you may need  important  depending on how it s applied

User · Answer

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 nbsp     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

User · Answer

You can use the CSS property  outline  and value of  none  on the anchor element   a   outline  none      Hope that helps

User · Answer

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

User · Answer

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

User · Answer

in order to Removing The Dotted Outline href link you can write in your css file   a      outline  0

User · Answer

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

User · Answer

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         lt meta http-equiv  X-UA-Compatible  content  IE 9    gt

User · Answer

Use Like This for HTML 4 01   lt img src  image gif  border  0  gt

[css] How can I remove the outline around hyperlinks images?

Examples related to css