Question

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

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>

Answer 1

你可以简单地在你的CSS中添加outline-style：none焦点如下：

button:focus { outline-style: none; }

这是一个example。

Answer 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中使用的跨浏览器解决方案

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

或者，您可以在jsfiddle

上查看此示例

删除了左上角/右下角/底部/等，并替换为所有4个角的单一样式。还添加了用于跨浏览器支持的兼容行（aka webkit，moz）。动作事件会自动继承主类（除非像background:#F00;所见，否则被覆盖）

此外，请阅读此＆gt;＆gt; Why you shouldn't remove the dotted outline, and how to if you really must

大纲是出于无障碍原因。

Answer 3

您需要添加outline: none;。

Answer 4

使用outline: none，就像这样。

button:focus { outline: none; }

这里是demo

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

4 个答案:

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