Remove the dotted border that appears when a hyperlink or button is clicked

During the front-end production process, you will find that some text/picture links, or some input controls, will have a dotted border around them when clicked. Generally, dotted borders will appear under Firefox and IE browsers, but not under Google.

These dotted borders are used as an auxiliary to visual design. When you use the keyboard Tab key to browse the page without using the mouse, the location of the current link or control will be marked for easy browsing. This is even more essential for those with visual impairments.

But sometimes we don’t want to use them because browsers interpret dotted boxes differently and irregularly, so it becomes a flaw in the visual design. So at this time, we want to disable these dotted borders so that the viewer's visual enjoyment can be flawless.

Pure CSS removes the dotted border that appears when a hyperlink or button is clicked

<style>
a,input,button{ outline:none; }
::-moz-focus-inner{border:0px;}
</style>

 
<a><img  src="/static/imghwm/default1.png" data-src="http://www.admin10000.com/skin/logo.jpg" class="lazy" alt="Remove the dotted border that appears when a hyperlink or button is clicked" ></a>
<a>admin10000.com</a>
<input>
<button>admin10000.com</button>

As can be seen from the above code, it can be solved by setting the CSS attribute outline.

There is a bug in FF, in which the input and button labels are specially processed through the private attribute::-moz-focus-inner

The above method is invalid under IE6 and IE7. It can be solved using the onfocus attribute, as follows:

​admin10000.com

It only takes one sentence to use the jquery method, it is very simple and supports all browsers

​$("a,input,button").focus(function(){this.blur()});

The above is the detailed content of Remove the dotted border that appears when a hyperlink or button is clicked. For more information, please follow other related articles on the PHP Chinese website!