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

不建议这样做，因为它会降低您网站的可访问性;有关详细信息，请参阅此帖子。

也就是说，如果你坚持，这个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 文档中的哪个位置，都将始终应用该规则。

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

在删除丑陋的蓝色轮廓之前，您可能需要考虑可访问性。默认情况下，该蓝色轮廓放置在可聚焦元素上。这样，有辅助功能问题的用户就可以通过按 Tab 键来聚焦该按钮。一些用户不具备使用鼠标的运动技能，只能使用键盘（或其他一些输入设备）进行计算机交互。当您删除蓝色轮廓时，将不再有关于哪个元素聚焦的视觉指示器。如果要删除蓝色轮廓，则应将其替换为按钮聚焦的另一种视觉指示。

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

在下面的示例中，Chrome 的蓝色轮廓首先通过使用button:focus { outline:0 !important; }

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

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

按下按钮时，按钮如下：

如您所见，按钮在获得焦点时会变暗一些。就个人而言，我建议将对焦按钮调得更暗，以便按钮的对焦状态和正常状态之间存在非常明显的差异。

它不仅适用于残障用户

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

使用以下任一方法：

:active {
    outline:none;
}

或者，如果这不起作用：

:active {
   outline:none !important;
}

这对我有用（至少是 FF 和 Chrome）。与其定位状态，不如定位状态，这将在用户单击链接时消除浏览器中美学上突兀的突出显示。但是，当残障用户在页面中按制表符或按住 Shift 制表符时，它仍将保留焦点状态。双方都很高兴。:):focus:active

将其添加到您的 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;
}

或

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

用。所有主流浏览器（caniuse）都支持它。:focus-visible

/* 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.使用这个小的polyfill（约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

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

这是 Chrome 系列中的一个问题，并且一直存在。

引发了一个 bug 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;}

但是，如果您拥有大量用户，那么您就会对那些无法使用鼠标或只想使用键盘来提高速度的人不利。

我在引导程序上遇到了同样的问题。我用轮廓和框阴影解决了这个问题

.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 和可能的其他版本，大多数解决方案将不起作用。经过一番周折，我发现您需要应用 shadow-none 类：

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

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

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

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

将以下代码用于 Chakra UI，

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

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

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

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

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