Home > Article > Web Front-end > Remove the dotted border that appears when a hyperlink or button is clicked

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

巴扎黑Original: 2017-04-05 16:54:012006browse

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 type="text/css">
a,input,button{ outline:none; }
::-moz-focus-inner{border:0px;}
</style>
</head>
<body> 
<a href="http://www.admin10000.com" target="_blank"><img src="http://www.admin10000.com/skin/logo.jpg" border="0"></a>
<a href="http://www.admin10000.com" target="_blank">admin10000.com</a>
<input type="button" value="admin10000.com"/>
<button>admin10000.com</button>
</body>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of CSS clear float methodsNext article：Summary of CSS clear float methods

See more

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

Related articles