How to remove the "Dotted Border" on clicking?

css, html, javascript

Solution

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";
}

Problem

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 no USE: ``` .myButton input { position:absolute; display:block; top: 5%; left:87%; height: 44px; border:none; cursor:pointer; width: 43px; font: bold 13px sans-serif;; color:#333; background: url("hover.png") 0 0 no-repeat; text-decoration: none; } .myButton input:hover { background-position: 0 -44px; color: #049; outline: 0; } .myButton input:active { background-position: 0 -88px; color:#fff; outline: 0; } input:active, input:focus { outline: 0; } <div class="myButton"> <input type="submit" value=""> </div> ``` Nothing seems to be happening !!

Original source

Related problems