如何从已经访问过的按钮周围删除方形边框？答案

【问题标题】：How to remove the square border from around a button which has already been visited?如何从已经访问过的按钮周围删除方形边框？
【发布时间】：2018-07-31 01:38:39
【问题描述】：

单击其中一个按钮并返回主页后，我单击的按钮带有蓝色方形边框。如何删除此边框，以便在单击圆形按钮后没有方形边框？

button {
  width: 100px;
  height: 100px;
  background: #3F6;
  border-color: #000;
  border-radius: 4em;
}
button:hover {
  background: #F00;
}

<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>

【问题讨论】：

标签： html css

【解决方案1】：

您可以像这样在 CSS 中简单地添加大纲样式：无焦点：

button:focus { outline-style: none; }

这是example。

【讨论】：

【解决方案2】：

您要应用于这些对象的样式是：

outline: 0;

或者，如果你想从 ALL 中删除，你可以这样做：

<style>
    :focus {outline:none;}
    ::-moz-focus-inner {border:0;}
</style>

例如：

<style>
input {
   outline: 0;
}

button {
   outline: 0;
}
</style>

对于 IE9 支持，您应该包含以下元标记。

<meta http-equiv="X-UA-Compatible" content="IE=9" />

*注意：如果将样式应用于基础对象，则无需将其应用于动作；因此使用button 应用它，意味着您不必将它应用到button:focus、button:active 等。

您的代码已修改 - 在 Firefox 中工作的跨浏览器解决方案

a:focus {
   outline: 0;
}

/* added for Firefox compatability */
button::-moz-focus-inner, a::-moz-focus-inner { border:0; }

button
{
    width:100px;
    height:100px;
    background:#3F6;
    outline: 0;
    border-color:#000;
    -webkit-border-radius: 4em;
    -moz-border-radius: 4em;
    border-radius: 4em;
}

button:hover
{
    background:#F00;
}

<html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9" />

<title>Title</title>

</head>
<body>

<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>

</body>
</html>

或者，您可以在 jsfiddle 上查看此示例

删除了左上/右/下/等，并替换为所有 4 个角的单一样式。还添加了跨浏览器支持的兼容行（又名 webkit、moz）。动作事件自动继承主类（除非像你看到的 background:#F00; 那样被覆盖）

另外，请阅读>>Why you shouldn't remove the dotted outline, and how to if you really must

大纲是出于可访问性的原因。

【讨论】：

【解决方案3】：

您需要添加outline: none;。

【讨论】：

【解决方案4】：

使用outline: none，就像这样。

button:focus { outline: none; }

这是demo

【讨论】：