A dashed border that appears when you remove a hyperlink or button click

In the front-end production process will find that some text/image links, or some input control, when clicked will appear around the dotted border, generally in Firefox and IE browser appear dotted box, Google will not have.

These dashed borders are used as an aid to the visual design, and when the Keyboard tab is used to navigate the page without using the mouse, the location of the current link or control is marked for easy navigation. This is even more essential for those who are visually impaired.

But sometimes we do not want to use them, because the browser to the dashed box parsing is different, and irregular, so in the visual design has become some kind of defect. So at such times, we want to disable these dashed borders so that the visual enjoyment of the visitors is flawless.

A dotted border that appears when you remove a hyperlink or a button click on a pure CSS

<style type= "Text/css" >a,input,button{outline:none;}::-moz-focus-inner{border:0px;} </style>
As you can see from the above code, you can resolve this by setting the CSS properties outline.

FF has a bug where the Input,button tag is handled by private attributes::-moz-focus-inner Special handling

The above method is invalid under IE6 and IE7. You can use the Onfocus property to resolve the following:

<a href= "http://www.admin10000.com" target= "_blank" onfocus= "This.blur ()" >admin10000.com</a>

Using the jquery method, it's simple, it's easy to support all browsers

$ ("A,input,button"). focus (function () {This.blur ()});