不建议这样做，因为这会降低网站的可访问性;更多信息，请看这篇文章。

也就是说，如果你坚持，这个CSS应该工作:

button:focus {outline:0;}

查看它或JSFiddle: http://jsfiddle.net/u4pXu/

或者在这个片段中:

button.launch { background-color: #F9A300; border: none; height: 40px; padding: 5px 15px; color: #ffffff; font-size: 16px; font-weight: 300; margin-top: 10px; margin-right: 10px; } button.launch:hover { cursor: pointer; background-color: #FABD44; } button.launch { background-color: #F9A300; border: none; height: 40px; padding: 5px 15px; color: #ffffff; font-size: 16px; font-weight: 300; margin-top: 10px; margin-right: 10px; } button.launch:hover { cursor: pointer; background-color: #FABD44; } button.change { background-color: #F88F00; border: none; height: 40px; padding: 5px 15px; color: #ffffff; font-size: 16px; font-weight: 300; margin-top: 10px; margin-right: 10px; } button.change:hover { cursor: pointer; background-color: #F89900; } button:active { outline: none; border: none; } button:focus {outline:0;} <button class="launch">Launch with these ads</button> <button class="change">Change</button>

为了获得更好的结果，不要忘记!important声明

button:focus {outline:0 !important;}

具有!important属性的规则将始终被应用，无论该规则出现在CSS文档中的哪个位置。

等等!那丑陋的轮廓是有原因的!

Before removing that ugly blue outline, you may want to take accessibility into consideration. By default, that blue outline is placed on focusable elements. This is so that users with accessibility issues are able to focus that button by tabbing to it. Some users do not have the motor skills to use a mouse and must use only the keyboard (or some other input device) for computer interaction. When you remove the blue outline, there is no longer a visual indicator on what element is focused. If you are going to remove the blue outline, you should replace it with another type of visual indication that the button is focused.

可能的解决方案:对焦时使按钮变暗

对于下面的例子，Chrome的蓝色轮廓首先被删除使用按钮:focus {outline:0 !｝

下面是你的基本引导按钮，因为他们通常出现:

下面是接收焦点时的按钮:

下面是按下按钮时的情况:

正如您所看到的，当按钮获得焦点时，它们会稍微暗一些。就我个人而言，我会建议将焦点按钮设置得更暗，这样在焦点状态和正常状态之间就会有非常明显的区别。

它不仅适用于残疾用户

让你的网站更容易访问是经常被忽视的事情，但它可以帮助你在网站上创造更富有成效的体验。有许多普通用户使用键盘命令浏览网站，以保持双手在键盘上。

可以用这个:

:active {
    outline:none;
}

如果那也不管用的话:

:active {
   outline:none !important;
}

这适用于我(FF和Chrome，至少)。不要以:focus状态为目标，只需以:active状态为目标，当用户单击链接时，这将删除浏览器中美观的突出显示。但是当一个有残疾标签或shift-tab的用户浏览一个页面时，它仍然会保留焦点状态。双方都很高兴。：）

将其添加到CSS文件中。

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

我只是通过选择所有并应用outline:none到所有内容来删除页面中的所有标签的大纲:)

*:focus {outline:none}

正如bagofcole提到的，你可能还需要添加!important，所以样式看起来是这样的:

*:focus {outline:none !important}

在这个问题的实例中，我必须指定box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

对所有有蓝色边框问题的元素尝试此代码

*{
outline: none;
}

or

*{
outline-style: none;
}

这对我来说很管用:

button:focus {
    box-shadow:none;
}

对于这个问题:

用这个:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

结果:

对于任何使用Bootstrap并有此问题的人来说，他们使用:active:focus以及仅仅:active和:focus，所以你需要:

element:active:focus {
    outline: 0;
}

希望能节省一些人的时间来解决这个问题，我敲了敲我的头，想知道为什么这么简单的事情不能工作。

如果你想在输入中删除相同的效果，你可以添加下面的代码和按钮。

input:focus {outline:0;}

删除大纲对于可访问性是非常糟糕的!理想情况下，焦点环只在用户想要使用键盘时才会显示。

用途:focus-visible。它目前是W3C提议的使用CSS样式化仅用于键盘的焦点，并在Firefox (caniuse)中得到支持。在其他主要浏览器支持它之前，您可以使用这个健壮的填充。

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

我还写了一篇更详细的文章，以防你需要更多信息。

直到所有现代浏览器都开始支持css-selector:focus-visible， 保存可访问性的最简单，可能也是最好的方法是将这个棘手的焦点仅留给鼠标用户，而留给键盘用户:

1.使用这个小的填充(大约10kb): https://github.com/WICG/focus-visible 2.在css中添加下一个代码:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

浏览器对css4-selector:focus-visible的支持现在非常弱: https://caniuse.com/#search=focus-visible

简单写提纲:无;。不需要使用伪元素焦点

这是Chrome家族的一个问题，而且一直存在。

一个错误已经提出https://bugs.chromium.org/p/chromium/issues/detail?id=904208

它可以显示在这里:https://codepen.io/anon/pen/Jedvwj只要你添加一个边界的任何按钮一样(说role="button"已添加到一个标签为例)Chrome混乱和设置焦点状态，当你点击鼠标。

我强烈推荐使用这个修复程序:https://github.com/wicg/focus-visible。

只需执行以下步骤

npm install --save focus-visible

添加脚本到你的html:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

或者导入到你的主入口文件，如果使用webpack或类似的东西:

import 'focus-visible/dist/focus-visible.min';

然后把这个放在你的CSS文件中:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

你可以设置:

button:focus {outline:0;}

但如果你有大量的用户，你就会对那些不能使用鼠标或只想用键盘提高速度的用户不利。

我在bootstrap上也遇到了同样的问题。我用轮廓和盒影来解决

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}

解决可访问性问题的另一种方法是通过一点Javascript。感谢来自hackernoon的这篇深刻的博客文章:https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

这里的方法非常简单而有效:当人们开始使用tab键导航页面时添加一个类(当再次切换到鼠标时可选地删除它)。然后，您可以使用这个类来显示或不显示焦点轮廓。

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

我遇到了同样的问题，所以我使用简单的CSS-

.custom-button {
    outline: none
}

Chrome和其他浏览器的修复

button:focus { outline: none !important; box-shadow: none !important; }

如果您使用Bootstrap 4.1或其他版本，大多数解决方案将无法工作。在敲了很多脑袋之后，我发现你需要应用无影课程:

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

好吧，即使有永远不会有人看到这个的风险，因为已经有很多答案了，我想在2020年提供更多的js解决方案，有很多:

Outline.js或Outline.js这两个库都解决了我们在这里遇到的问题:删除鼠标的轮廓，但保留键盘功能或可访问性。

所以，与其决定哪种风格和可访问性更重要，不如两者都选!

使用下面的代码Chakra UI，

:focus {
  box-shadow: none !important;
}

*[data-focus] {
  box-shadow: none !important;
}`

要删除蓝色背景的水龙头，我使用

button {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}