In the process of making the front-end will be found, some text/picture links, or some input controls, in the click will appear around the dotted border, usually in Firefox and IE browsers appear dotted box, Google will not have.
These dotted borders are used as an adjunct to visual design, and when you use the Keyboard tab to navigate the page without using the mouse, the location of the current link or control is marked for easy browsing. 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 dotted line of the resolution is different, and irregular, so the visual design has become a certain flaw. So at this point, we want to disable these dotted borders so that the viewer's visual enjoyment is flawless.
Pure CSS removes a dotted border when hyperlinks or button clicks occur
CSS code to copy content to clipboard
- <style type= "Text/css" >
- a,input,button{Outline:none;}
- ::-moz-focus-inner{border:0px;}
- </style>
-
- <body>
- <a href= "http://www.admin10000.com" target= "_blank" ></a>
- <a href= "http://www.admin10000.com" target= "_blank" >admin10000.com</a>
- <input type= "button" value= "admin10000.com"/>
- <button>admin10000.com</button>
- </body>
As you can see from the above code, you can resolve it by setting CSS properties outline.
FF has bugs, where Input,button tags are handled by private properties::-moz-focus-inner Special handling
The above methods are invalid under IE6 and IE7. You can use the Onfocus property to resolve the following:
CSS code to copy content to clipboard
- <a href= "http://www.admin10000.com" target= "_blank" onfocus= "This.blur ()" >admin10000.com</a>
Using the jquery method takes just one sentence, very simple, and supports all browsers
JavaScript code to copy content to the Clipboard
- $ ("A,input,button"). focus (function () {This.blur ()});