使用 CSS 轮廓属性的解决方案
如果要移除按钮周围的焦点，可以使用 CSS 轮廓属性。
我们需要设置轮廓属性的“无”值。
移除按钮周围焦点的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.button:focus {
outline: none;
}
</style>
</head>
<body>
<button class="button">
<span class="name"></span> 点击这里
</button>
</body>
</html>
但是，如果按钮和输入没有良好的一致状态，则不建议这样做。
让我们看另一个例子，我们给 <button> 元素添加一点样式。
其中我们将按钮的 display 属性设置为“block”。
与前面的示例一样，我们使用值为“none”的outline 属性，但请注意，我们不使用:focus 伪类。
在没有 :focus 伪类的情况下移除样式按钮周围的焦点的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
button {
background-color: #a2e0b3;
font-size: 24px;
border: none;
cursor: pointer;
outline: none;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div>
<button type="submit">
Click here
</button>
</div>
</body>
</html>
在下面，我们可以找到另一个示例，其中我们移除了 HTML <a> 标记周围的焦点。
我们将 <a> 标签的显示设置为“inline-block”。
移除 HTML <a> 标签周围的焦点的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
a {
background-color: lightblue;
text-decoration: none;
font-size: 20px;
border: none;
cursor: pointer;
outline: none;
padding: 10px 30px;
display: inline-block;
}
</style>
</head>
<body>
<p>点击开始学习git教程</p>
<a href="https://www.onitroad.com/git.html">git教程</a>
</body>
</html>
在我们的最后一个示例中，我们移除了 HTML <input> 标签周围的焦点。
其中我们在 <input> 元素上使用 :focus 伪类，并将 outline 和 box-shadow 属性设置为“none”。
另请注意，我们使用了 ::-moz-focus-inner 伪元素，它是 Mozilla 的扩展。
移除 HTML <input> 标签周围的焦点的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
input {
font-size: 18px;
cursor: pointer;
border: none;
display: inline-block;
padding: 10px 20px;
}
input:focus {
outline: none;
box-shadow: none;
}
input::-moz-focus-inner {
border: 0;
}
</style>
</head>
<body>
<input type="button" value="Button">
</body>
</html>
::-moz-focus-inner 是非标准的，不推荐在面向 Web 的生产站点上使用，因为它不适用于每个用户。
日期：2020-06-02 22:15:11 来源：oir作者：oir