删除大纲是可访问性的噩梦。使用键盘的人永远不知道他们在敲什么。

最好离开它，因为大多数点击按钮会把你带到某个地方，或者如果你必须删除轮廓，然后把它隔离为一个特定的类名。

.no-outline {
  outline: none;
}

然后，您可以在需要时应用该类。

给定下面的html:

<button class="btn-without-border"> Submit </button>

在css样式中执行以下操作:

.btn-without-border:focus {
    border: none;
    outline: none;
}

此代码将删除按钮边框，并在单击按钮时禁用按钮边框焦点。

这个方法对我很管用

button:focus {
    border: none;
    outline: none;
}

这比你想象的要简单得多。当按钮被聚焦时，应用outline属性，如下所示:

button:focus {
    outline: 0 !important;
}

但是当我使用none值时，它对我不起作用。

移除nessorry accessible事件在标准的web开发中不是一个好主意。 无论哪种方法，如果你在寻找解决方案，仅仅去掉轮廓并不能解决问题。您还必须删除蓝色阴影。对于特定的场景，请使用单独的类名将此特殊样式与按钮隔离。

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

最好这样做

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

在使用键盘时，另一种恢复轮廓的方法是使用:focus-visible。但是，这在IE:https://caniuse.com/?search=focus-visible上不起作用。