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

我正在制作网页，并且需要自定义样式的<button>标签。因此，对于CSS，我说：border: none。现在，它可以完美地用于野生动物园，但是在Chrome浏览器中，当我单击其中一个按钮时，它周围会出现一个令人讨厌的蓝色边框。我以为button:active { outline: none }或button:focus { outline:none }会起作用，但都没有。有任何想法吗？

这是被单击之前的样子（以及我希望它在被单击之后仍保持外观）：

这就是我正在谈论的边界：

这是我的CSS：

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

不建议这样做，因为它会使网站的可访问性降低；有关更多信息，请参阅这篇文章。

也就是说，如果您坚持要求，那么此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>

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

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

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

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

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

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

按下按钮时的按钮如下：

如您所见，按钮在获得焦点时会变暗。就个人而言，我建议使聚焦按钮更加暗，以使按钮的聚焦状态和正常状态之间有非常明显的区别。

不只是针对残疾用户

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

我只是通过选择全部并对所有内容应用outline：none来从页面中所有标签中删除大纲：)

*:focus {outline:none}

如bagofcole所述，您可能还需要添加！important，因此样式将如下所示：

*:focus {outline:none !important}

在这个问题上，我必须指定 box-shadow: none

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

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

button:focus {outline:0 !important;}

具有！important属性的规则将始终应用，无论该规则在CSS文档中的位置如何。

拆卸outline很容易造成伤害！理想情况下，仅当用户打算使用键盘时才会显示聚焦环。

使用：focus-visible。当前，这是W3C建议，用于使用CSS设置仅键盘焦点的样式，并且在Firefox（caniuse）中受支持。在其他主流浏览器支持之前，您可以使用此强大的polyfill。

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

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

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

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

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

使用以下任一方法：

:active {
    outline:none;
}

或如果这不起作用：

:active {
   outline:none !important;
}

这对我有效（至少是FF和Chrome）。无需定位:focus状态，而只需定位状态，:active当用户单击链接时，这将删除浏览器中美观的突出显示。但是，当具有残障功能的用户在页面上移动或移动时，它仍将保留焦点状态。双方都很高兴。:)

对于这个问题：

用这个：

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

希望能节省一些时间弄清楚那个人，撞了一下我的头，想知道为什么这么简单的事情不起作用。

如果您使用的是Bootstrap 4.1和其他版本，则大多数解决方案将无法使用。反复敲打头后，我发现您需要应用Shadow-none类：

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

这对我有用：

button:focus {
    box-shadow:none;
}

Chrome和其他浏览器的修复

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

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

*{
outline: none;
}

要么

*{
outline-style: 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
}

如果要删除输入中的相同效果，则可以添加以下代码以及按钮。

input:focus {outline:0;}

在所有现代浏览器都开始支持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家族中的一个问题，并且一直存在。

提出了一个错误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
}