JQuery: $(this).text('some_text'); is causing my link to have a border

Question

I have the following code:

$('a.btn-slide').toggle(function() {
    $("#SliderDIV").slideDown("fast");
    $(this).text('Hide/Show');
});

Only in Firefox, when I click the a href link to hide/show the DIV, Firefox display a dotted border around the href link (which I don't understand why and it shouldn't be).

However, in IE and Chrome, when I toggle the link - it does not create this strange border around the link.

Answer 1

I think you are talking about the outline property. It is generally an annoying thing. you can set it off in your master stylesheet like this:

* {outline:none;}

Answer 2

Thus, you want to get rid of the dotted outline?

Just do

a {
   outline: none;
}

This however impacts users with keyboard navigation. They won't be able anymore to figure which link they've tabbed now.

Answer 3

I believe that you are talking about the dotting border that appears after a link is clicked.. it is annoying haha but here is what I've used in the past to fix it

http://sonspring.com/journal/removing-dotted-links

a:active {
  outline: none;
}

This way you are being specific to your links, and avoiding any issues with other css elements.

Answer 4

Add outline: none !important to the element's CSS.