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

input:focus {outline:0;}

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

*{
outline: none;
}

or

*{
outline-style: none;
}

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

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

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

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

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

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

它不仅适用于残疾用户

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

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

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

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

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

button:focus {outline:0 !important;}

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

将其添加到CSS文件中。

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