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

Question

我正在处理网页，我想要自定义样式的<button>代码。所以使用CSS，我说：border: none。现在它在safari中完美运行，但在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;
}

Answer 1

只需将此添加到您的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>

Answer 2

<强>等待！这个丑陋的轮廓有一个原因！

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

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

对于以下示例，首先使用button:focus { outline:0 !important; }

删除了Chrome的蓝色轮廓

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

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

按下按钮时的按钮：

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

这不仅适用于残疾用户

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

Answer 3

我只是通过选择all并将outline：none应用于所有内容，从页面中的所有标签中删除轮廓：）

*:focus {outline:none}

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

*:focus {outline:none !important}

Answer 4

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

button:focus {outline:0 !important;}

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

Answer 5

在我遇到此问题的实例中，我必须指定box-shadow: none

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

Answer 6

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

我还写了more detailed post，以防您需要更多信息。

Answer 7

在CSS文件中添加此内容。

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

Answer 8

使用此：

:active {
    outline:none;
}

或者如果这不起作用：

:active {
   outline:none !important;
}

这对我有用（至少FF和Chrome）。只需定位:focus状态，而不是定位:active状态，这将在用户点击链接时删除浏览器中美观突兀的突出显示。但是当有残障的用户选项卡或通过页面切换标签时，它仍将保留焦点状态。双方都很开心。 ：）

Answer 9

对于任何使用Bootstrap并遇到此问题的人，他们使用：active：focus以及just：active和：focus所以你需要：

final long startTime= System.currentTimeMillis();
System.out.println("something");
final long stopTime= System.currentTimeMillis();
System.out.println("endfunction:"+ (stopTime - startTime));

希望某人能节省一些时间来解决这个问题，让我有点疑惑，想知道为什么这么简单的事情无效。

Answer 10

这对我有用：

button:focus {
    box-shadow:none;
}

Answer 11

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

*{
outline: none;
}

或

*{
outline-style: none;
}

Answer 12

解决这个问题：

使用它：

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

结果：

Answer 13

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

input:focus {outline:0;}

Answer 14

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

.custom-button {
    outline: none
}

Answer 15

只需编写private void setupGridView(String selectedDirectory){ Log.d(TAG, "setupGridView: directory chosen: " + selectedDirectory); final ArrayList<String> imgURLs = FileSearch.getFilePaths(selectedDirectory); ... if (imgURLs.isEmpty()) { // Array list is empty, handle accordingly } else { //set the first image to be displayed when the activity fragment view is inflated try{ setImage(imgURLs.get(0), galleryImage, mAppend); mSelectedImage = imgURLs.get(0); } catch (IndexOutOfBoundsException e){ Log.e(TAG, "setupGridView: ArrayIndexOutOfBoundsException: " +e.getMessage() ); } } ... } 。无需使用伪元素outline:none;

Answer 16

直到所有现代浏览器开始支持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的浏览器支持：目前焦点可见非常弱：
https://caniuse.com/#search=focus-visible

Answer 17

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

但是，如果您有大量的用户，那么您将无法使用鼠标或只想使用键盘来提高速度。

Answer 18

解决此处尚未提及的可访问性问题的另一种方法是通过一点点Javascript。鸣谢来自hackernoon的这篇富有洞察力的博客文章：https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2 这里的方法非常简单却有效：当人们开始使用Tab键浏览页面时添加一个类（并可以选择在再次切换到鼠标时将其删除。然后您可以使用该类显示焦点轮廓或不显示焦点轮廓。 函数handleFirstTab（e）{     if（e.keyCode === 9）{//“我是键盘用户”键         document.body.classList.add（'user-is-tabbing'）;         window.removeEventListener（'keydown'，handleFirstTab）;     } } window.addEventListener（'keydown'，handleFirstTab）;

Answer 19

好吧，即使有从未有人看到的风险，因为已经有太多的答案了，我想在2020年之前提供更多的js解决方案，但是还有很多：

outline.js或outliner.js两个库都完全解决了我们在此处遇到的问题：删除了鼠标的轮廓，但保留了键盘的功能或可访问性。

因此，不必决定哪个更重要的样式或可访问性，请选择两者！

Answer 20

我在使用引导程序时遇到了同样的问题，我同时使用了轮廓和框阴影来解决了

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

}

Answer 21

Chrome和其他浏览器的修复程序

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

Answer 22

如果您使用的是Bootstrap 4.1和其他版本，大多数解决方案将无法正常工作。撞了很多头后，我发现您需要应用 shadow-none 类：

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