How To Remove The "Dotted Border" On Clicking?

As you can see I want to somehow remove the dotted lines after the button has been clicked.Any ideas how ? Thanks GUYS : This is the current status of my CSS ansd HTML but still

Solution 1:

You have to style the <a> like:

a {outline: none}

Solution 2:

use the below code

a:active
    {
    outline: none;
    }

try for other browsers also

a:focus
{
-moz-outline-style: none;
}
a:focus { outline:none }

Solution 3:

Possible with pure HTML as well:

<a href="..." hidefocus="hidefocus">...</a>

And with JavaScript you can do that on all links:

window.onload = function WindowLoad(evt) {
   //hide focus:
   var arrLinks = document.getElementsByTagName("a");
   for (var i = 0; i < arrLinks.length; i++) {
       arrLinks[i].hideFocus = "true";
}

Solution 4:

Despite my comment on your question,

You should keep them for accessibility.

You can find your CSS-trick here for this

(Anyway, you should keep them.)

Solution 5:

    #myElement { outline: 0; }

Try this on your element, i dont now if is an image, div, button, link. But it works