How to remove the dotted border of hyperlinks by using CSS

Source: Internet
Author: User

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
    1. <style type= "Text/css" >
    2. a,input,button{Outline:none;}
    3. ::-moz-focus-inner{border:0px;}
    4. </style>
    5. <body>
    6. <a href= "http://www.admin10000.com" target= "_blank" ></a>
    7. <a href= "http://www.admin10000.com" target= "_blank" >admin10000.com</a>
    8. <input type= "button" value= "admin10000.com"/>
    9. <button>admin10000.com</button>
    10. </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
    1. <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
    1. $ ("A,input,button"). focus (function () {This.blur ()});
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.