从CSS自定义样式按钮中删除蓝色边框Chrome

这样做是不建议，因为它回归了您网站的可访问性；有关更多信息，请参阅此帖子。

也就是说，如果你坚持，这个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;}

具有！重要属性的规则将始终应用，无论该规则出现在CSS文档中的何处。

等等！那个丑陋的轮廓是有原因的！

在删除那个难看的蓝色轮廓之前，您可能需要考虑可访问性。默认情况下，该蓝色轮廓放置在可聚焦的元素上。这是为了让有可访问性问题的用户能够通过选项卡来聚焦该按钮。一些用户没有使用鼠标的运动技能，必须只使用键盘（或其他一些输入设备）进行计算机交互。当您删除蓝色轮廓时，不再有关于哪个元素被聚焦的视觉指示器。如果您要删除蓝色轮廓，您应该将其替换为按钮被聚焦的另一种视觉指示。

可能的解决方案：聚焦时变暗按钮

对于下面的示例，首先使用button:focus { outline:0 !important; }删除Chrome的蓝色轮廓

以下是正常显示的基本Bootstrap按钮：

以下是获得焦点时的按钮：

按下按钮时如下：

正如您所看到的，当按钮获得焦点时，它们会有点暗。就个人而言，我建议将焦点按钮设置得更暗，以便在焦点状态和按钮的正常状态之间存在非常明显的差异。

它不仅适用于残疾用户

使您的网站更易于访问是经常被忽视的事情，但可以帮助您的网站创造更高效的体验。有许多普通用户使用键盘命令浏览网站，以便将手放在键盘上。

使用这个：

:active {outline:none;}

或者如果这不起作用：

:active {outline:none !important;}

这对我有效（至少FF和Chrome）。而不是针对:focus状态，只需针对:active状态，当用户单击链接时，这将消除浏览器中美观的突出显示。但当残疾用户通过页面进行选项卡或移位选项卡时，它仍然会保留焦点状态。双方都很高兴。：）

将其添加到您的CSS文件中。

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

我只是从页面中的所有标签中删除大纲，方法是选择全部并将大纲：无应用于所有内容：）

*:focus {outline:none}

正如Bagofcole提到的，你可能需要添加！也很重要，所以样式如下所示：

*:focus {outline:none !important}

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

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

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

*{outline: none;}

或

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

删除outline对可访问性来说很糟糕！理想情况下，焦点环仅在用户打算使用键盘时显示。

使用：焦点可见。它目前是一个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：焦点可见，
保存可访问性最简单也可能是最好的方法是删除这个棘手的焦点仅适用于鼠标用户并保存它对于键盘用户：

1.使用这个微小的聚酰亚胺（约10kb）：https://github.com/WICG/focus-visible
2.在你的css中的某个地方添加下一段代码：

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

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

只需编写outline:none;。无需使用伪元素focus

这是Chrome家庭的一个问题，一直存在。

bug已被提升https://bugs.chromium.org/p/chromium/issues/detail?id=904208

它可以显示在这里：https://codepen.io/anon/pen/Jedvwj只要你添加一个边框任何类似按钮（说角色=“按钮”已被添加到一个标签例如）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;}

但是，如果你有大量的用户，你就会使那些不能使用鼠标或只想使用键盘以提高速度的人处于不利地位。

我在引导时遇到了同样的问题。我用轮廓和框阴影解决了

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

另一种在这里还没有提到的方法是通过一点点javascript。这篇来自hacker的有见地的博客文章的学分：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" keydocument.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或outliner.js两个库都解决了我们在这里遇到的问题：删除鼠标的轮廓，但保留键盘功能或可访问性。

因此，与其决定哪个更重要的风格或可访问性，不如选择两者！

将此下面的代码用于Chakra UI，

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

为了在水龙头上删除蓝色背景，我使用

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