html - 如何在单击时消除按钮周围的焦点

Question

单击按钮后，我的按钮周围都有一个突出显示。这是在 Chrome 中。

未选中已选中

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

我正在使用带有主题的 Bootstrap，但我很确定不是这样：我之前在另一个项目中注意到了这一点。

如果我使用<a>标签而不是<button>. 为什么？如果我想使用<button>它，我将如何让它消失？

score 375 · Accepted Answer

I found this Q and A on another page, and overriding the button focus style worked for me. This problem may be specific to MacOS with Chrome.

.btn:focus {
  outline: none;
  box-shadow: none;
}

Note though that this has implications for accessibility and isn't advised until you have a good consistent focus state for your buttons and inputs. As per the comments below, there are users out there who cannot use mice.

score 146 · Accepted Answer

你想要这样的东西：

<button class="btn btn-primary btn-block" onclick="this.blur();">...

.blur() 方法正确地移除了焦点突出显示并且不会弄乱 Bootstraps 的样式。

score 68 · Accepted Answer

我的理解是，焦点首先应用在事件之后，因此根据您的需要onMouseDown调用可能是一个干净的解决方案。这当然是一个可访问性友好的解决方案，但显然它调整了可能与您的 Web 项目不兼容的鼠标单击行为。e.preventDefault()onMouseDown

我目前正在使用此解决方案（在react-bootstrap项目中），单击后我没有收到焦点闪烁或按钮的保留焦点，但我仍然能够标记我的焦点并直观地可视化相同按钮的焦点。

score 49 · Accepted Answer

2021焦点可见解决方案

注意 1：在下面列出的 3 个选项中，按钮的行为方式相同（单击时没有聚焦环），但选择和输入的默认行为略有不同。只有选项 3 始终移除按钮、输入和选择周围的聚焦环。请比较所有方法并确保您了解其中的含义。

注意 2：由于 CSS 的级联特性，CSS 规则的顺序很重要。

注 3：任何方法仍然存在一些可访问性问题focus-visible。也就是说，在浏览器公开配置以让用户选择何时显示可见的焦点环之前，应该认为焦点可见的可访问性比一直使用焦点环更糟糕，但比:focus {outline:none}这个问题的其他答案中提到的有害方法要好. 有关更多详细信息，请参阅此答案底部的“关于可访问性的说明”部分。

选项 1：使用`:focus-visible`伪类

:focus-visible伪类可用于为不通过键盘导航（即，通过触摸或鼠标单击）的用户删除按钮和各种元素上的轮廓和焦点环。

警告：截至 2021 年，:focus-visible伪类**在现代浏览器中得到广泛支持，但在边缘浏览器上失败**。如果旧浏览器支持很重要，那么下面选项 2 中的 Javascript polyfill 是最接近的近似值。

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

/**
 * Cross-browser styles for explicit focus via 
 * keyboard-based (eg Tab) navigation or the
 * .focus-visible utility class.
 */
:focus,
.focus-visible:focus:not(:focus-visible) {
  outline: 0;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069;
}

<h3>Defaults:</h3>
<button>Foo</button>
<input type="button" value="Bar"/> 
<select><option>Baz</option></select>
<input type="text" placeholder="Qux"/>
<textarea placeholder="Quux" rows="1"></textarea>

<h3>Force focus on click:</h3>
<button class="focus-visible">Foo</button>
<input class="focus-visible" type="button" value="Bar"/> 
<select class="focus-visible"><option>Baz</option></select>
<input class="focus-visible" type="text" placeholder="Qux"/>
<textarea class="focus-visible" placeholder="Quux" rows="1">
</textarea>

选项 2：使用`.focus-visible`polyfill

该解决方案使用普通的 CSS 类而不是上面提到的伪类，并且具有更广泛的浏览器支持（2021 年）。它需要在您的 HTML 中添加 1 或 2 个 Javascript；一个用于官方的焦点可见 polyfill，另一个用于不支持 classList的旧浏览器。

注意：在 Chrome 中，polyfill 处理选择的方式似乎与原生:focus-visible伪类不同。

/**
 * Cross-browser focus ring for explicit focus 
 * via keyboard-based (eg Tab) navigation or the
 * .focus-visible utility class.
 */
:focus {
  outline: 0;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069;
}

/**
 * Remove focus ring for non-explicit scenarios.
 */
:focus:not(.focus-visible) {
  outline: 0;
  box-shadow: none;
}

<h3>Defaults:</h3>
<button>Foo</button>
<input type="button" value="Bar"/> 
<select><option>Baz</option></select>
<input type="text" placeholder="Qux"/>
<textarea placeholder="Quux" rows="1"></textarea>

<h3>Force focus on click:</h3>
<button class="focus-visible">Foo</button>
<input class="focus-visible" type="button" value="Bar"/> 
<select class="focus-visible"><option>Baz</option></select>
<input class="focus-visible" type="text" placeholder="Qux"/>
<textarea class="focus-visible" placeholder="Quux" rows="1">
</textarea>

<!-- place this code just before the closing </html> tag -->
<script src="https://cdn.polyfill.io/v2/polyfill.js? 
features=Element.prototype.classList"></script>
<script src="https://unpkg.com/focus-visible"></script>

选项 3：使用全局键导航与鼠标导航状态

焦点可见的逆解决方案是在上禁用轮廓mousemove，并在上启用它们keydown -> "Tab"。在这种情况下，您必须指定哪些元素应该显示轮廓，而不是指定哪些元素不应该显示轮廓。

document.addEventListener("mousemove", () => 
  document.body.classList.remove("focus-visible")
);

document.addEventListener("keydown", ({key}) => 
  (key === "Tab") && document.body.classList.add("focus-visible")
);

/**
 * Cross-browser focus ring for explicit focus 
 * via keyboard-based (eg Tab) navigation or the
 * .focus-visible utility class.
 */
:focus {
  outline: 0;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069;
}

/**
 * Remove focus ring for non-explicit scenarios.
 */
body:not(.focus-visible) :focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

<h3>Defaults:</h3>
<button>Foo</button>
<input type="button" value="Bar"/> 
<select><option>Baz</option></select>
<input type="text" placeholder="Qux"/>
<textarea placeholder="Quux" rows="1"></textarea>

<h3>Force focus on click:</h3>
<button class="focus-visible">Foo</button>
<input class="focus-visible" type="button" value="Bar"/> 
<select class="focus-visible"><option>Baz</option></select>
<input class="focus-visible" type="text" placeholder="Qux"/>
<textarea class="focus-visible" placeholder="Quux" rows="1">
</textarea>

关于可访问性的说明

删除所有焦点环是一个已知:focus { outline: none; }的:focus { outline: 0; }可访问性问题，从不推荐。此外，可访问性社区中的一些人宁愿你永远不要删除焦点环轮廓，而是让所有东西都有一个:focus样式——如果样式合适，要么是有效的outline，要么是有效的。box-shadow

最后，可访问性社区中的一些人认为，开发人员不应该:focus-visible在他们的网站上实现，直到所有浏览器都实现并公开用户偏好，让人们选择是否所有项目都应该是可聚焦的。我个人并不赞同这种想法，这就是为什么我提供了这个我觉得比有害的解决方案要好得多的解决方案:focus { outline:none }。我认为这:focus-visible是设计关注点和可访问性关注点之间的快乐媒介。截至 2022 年，Chrome 浏览器已经公开了设置焦点可见性样式的用户偏好，但 FireFox 没有。

资源：

https://css-tricks.com/keyboard-only-focus-styles/

演示：

https://wigg.github.io/focus-visible/demo/

score 39 · Accepted Answer

不敢相信还没有人发过这个。

使用标签而不是按钮。

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

小提琴

score 33 · Accepted Answer

尽管删除所有焦点按钮的轮廓很容易（如 user1933897 的回答），但从可访问性的角度来看，该解决方案很糟糕（例如，请参阅Stop Messing with the Browser's Default Focus outline）

另一方面，如果您的浏览器认为在您单击它后已聚焦（我在看着您，OS X 上的 Chrome），则可能无法说服您的浏览器停止将您单击的按钮设置为已聚焦。

所以，我们能做些什么？我想到了几个选择。

1）Javascript（jQuery）：$('.btn').mouseup(function() { this.blur() })

您正在指示浏览器在单击按钮后立即移除任何按钮周围的焦点。通过使用mouseup而不是，click我们保留了基于键盘的交互的默认行为（mouseup不会被键盘触发）。

2）CSS：.btn:hover { outline: 0 !important }

在这里，您只关闭悬停按钮的轮廓。显然这并不理想，但在某些情况下可能就足够了。

score 17 · Accepted Answer

这对我有用。我创建了一个自定义类，它覆盖了必要的 CSS。

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

-webkit-box-shadow 适用于 Chrome 和 safari 浏览器。

score 13 · Accepted Answer

这对我有用，另一个没有提到的解决方案。只需将它扔到点击事件中......

$(this).trigger("blur");

或者从另一个事件/方法调用它......

$(".btn_name").trigger("blur");

score 10 · Accepted Answer

我找到了解决办法。当我们聚焦时，引导程序使用 box-shadow，所以我们只是禁用它（没有足够的声誉，无法上传图像:(）。

我加

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

有用。

score 8 · Accepted Answer

如果您使用该规则:focus { outline: none; }删除轮廓，则链接或控件将是可聚焦的，但对于键盘用户没有焦点指示。使用 JS 之类onfocus="blur()"的方法来删除它更糟糕，并且会导致键盘用户无法与控件交互。

您可以使用的 hack有点不错:focus { outline: none; }，包括在用户与鼠标交互时添加规则，如果检测到键盘交互则再次删除它们。Lindsay Evans为此制作了一个库：https ://github.com/lindsayevans/outline.js

但我更愿意在 html 或 body 标记上设置一个类。并在 CSS 文件中控制何时使用它。

例如（内联事件处理程序仅用于演示目的）：

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

我确实放了一支笔：http ://codepen.io/snobojohan/pen/RWXXmp

但要注意存在性能问题。每次用户在鼠标和键盘之间切换时，都会强制重新绘制。更多关于避免不必要的油漆http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

score 6 · Accepted Answer

我也注意到了这一点，尽管这真的让我很恼火，但我相信没有适当的方法来处理这个问题。

我建议反对所有其他给出的解决方案，因为它们完全取消了按钮的可访问性，所以现在，当你点击按钮时，你不会得到预期的焦点。

应该避免这种情况！

.btn:focus {
  outline: none;
}

score 5 · Accepted Answer

如果上述方法不适合您，请尝试以下操作：

.btn:focus {outline: none;box-shadow: none;border:2px solid transparent;}

正如 user1933897 指出的那样，这可能特定于带有 Chrome 的 MacOS。

score 5 · Accepted Answer

晚了，但谁知道它可能会帮助某人。CSS 看起来像：

.rhighlight{
   outline: none !important;
   box-shadow:none
}

HTML 看起来像：

<button type="button" class="btn btn-primary rHighlight">Text</button>

这样您就可以保留 btn 及其相关行为。

score 4 · Accepted Answer

对于想要一种纯粹的 CSS 方式来做到这一点的人：

:focus:not(:focus-visible) { outline: none }

这也适用于链接等，并且奖励，它保持键盘可访问性。最后，不支持 :focus-visible 的浏览器会忽略它

score 3 · Accepted Answer

我在上面的评论中提到了这一点，但为了清楚起见，值得将其列为单独的答案。只要您实际上不需要将焦点放在按钮上，就可以使用焦点事件将其移除，然后再应用任何 CSS 效果：

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

这避免了使用点击事件时可以看到的闪烁。这确实限制了界面，您将无法使用选项卡切换到按钮，但这在所有应用程序中都不是问题。

score 3 · Accepted Answer

试试这个解决方案来删除按钮周围的边框。在 css 中添加此代码。

尝试

button:focus{
outline:0px;
}

如果不起作用，请在下面使用。

button:focus{
 outline:none !important;
 }

score 3 · Accepted Answer

风格

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

使用

<button class="btn btn-primary not-focusable">My Button</button>

score 3 · Accepted Answer

3

这是工作，希望对你有帮助

.btn:focus, .btn:focus:active {
    outline: none;
}

于 2017-01-31T21:56:56.900 回答

score 2 · Accepted Answer

.btn:focus:active {
  outline: none;
}

这会在单击时删除轮廓，但在切换时保持焦点（对于 a11y）

score 2 · Accepted Answer

另一种可能的解决方案是在用户单击按钮时使用 Javascript 侦听器添加一个类，然后使用另一个侦听器移除该类的焦点。这保持了可访问性（可见标签），同时也防止了 Chrome 的古怪行为，即在单击时考虑一个按钮的焦点。

JS：

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS：

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

完整示例： https ://jsfiddle.net/4bbb37fh/

score 2 · Accepted Answer

这个效果最好

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

score 2 · Accepted Answer

对于使用react-bootstrap并遇到此问题的任何人，这是我为使工作正常所做的工作：

.btn:focus {
    /* the !important is really the key here, it overrides everything else */
    outline: none !important;
    box-shadow: none !important;
}

在添加之前，事情并没有奏效!important。

score 2 · Accepted Answer

我们遇到了类似的问题，并注意到Bootstrap 3 在其选项卡上没有问题（在 Chrome 中）。看起来他们正在使用大纲样式，它允许浏览器决定最好做什么，而 Chrome 似乎可以做你想做的事：除非你只是单击元素，否则在聚焦时显示大纲。

支持outline-style很难确定，因为浏览器可以决定这意味着什么。最好检查几个浏览器并有一个后备规则。

score 1 · Accepted Answer

  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

此大纲：无适用于按钮和标签

score 1 · Accepted Answer

你可以设置tabIndex="-1". 当您通过可聚焦控件 TAB 时，它将使浏览器跳过此按钮。

此处建议的其他“修复”，仅删除焦点轮廓，但仍使按钮处于可选项状态。但是，从可用性的角度来看，您已经删除了发光，因此您的用户无论如何都不知道当前聚焦的按钮是什么。

另一方面，使按钮不可制表具有可访问性含义。

我正在使用它从 X 按钮中删除焦点轮廓bootstrap modal，该按钮在底部有重复的“关闭”按钮，因此我的解决方案对可访问性没有影响。

score 1 · Accepted Answer

我没有找到既不破坏可访问性也不破坏功能的可靠答案。

也许结合一些整体效果会更好。

<h1
  onmousedown="this.style.outline='none';"
  onclick="this.blur(); runFn(this);"
  onmouseup="this.style.outline=null;"
>Hello</h1>

function runFn(thisElem) { console.log('Hello: ', thisElem); }

score 1 · Accepted Answer

如果您想在键盘上mousedown而不是在键盘上完成轮廓的删除tab，并且您正在使用VueJS，这里是解决方案：

<button @mousedown="$event.preventDefault()">No Online On Click</button>

这基本上可以防止它在点击时接收焦点，但任何其他接收焦点的方式都会保持活动状态。

score 1 · Accepted Answer

在 CSS 中添加：

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

score 1 · Accepted Answer

我找到了一个解决方案，只需在您的 css 代码中添加以下行。

button:focus { outline: none }

score 1 · Accepted Answer

有点核，但这是在 Angular 9 上对我有用的简单方法。与 causon 一起使用，因为它会影响每个 html 元素。

*:focus {
  outline: 0 !important;
}

score 0 · Accepted Answer

这里有两种可能的解决方案。

1.)button type="button" className="btn-cart"onClick{(event)=>this.blur(event)}

2.)button type="button" className="btn-cart" onclick={this.blur}

这两种解决方案都将删除按钮周围的突出显示部分，即 ->blur()有自己的规范来删除周围突出显示的部分。

score 0 · Accepted Answer

在使用按钮触发“转换”事件时，我在 MacOS 和 Chrome 上遇到了同样的问题。如果阅读本文的任何人已经在使用事件侦听器，您可以通过.blur()在您的操作后调用来解决它。

例子：

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

虽然如果您还没有使用事件侦听器，添加一个只是为了解决这个问题可能会增加不必要的开销，并且像以前的答案提供的样式解决方案会更好。

score 0 · Accepted Answer

如果您使用的是 webkit 浏览器（并且可能是与 webkit 供应商前缀兼容的浏览器），则该大纲属于按钮的-webkit-focus-ring伪类。只需将其设置outline为none：

*:-webkit-focus-ring {
  outline: none;
}

Chrome 就是这样一个 webkit 浏览器，这种效果也发生在 Linux 上（不仅仅是 macOS 的东西，尽管一些 Chrome 样式仅适用于 macOS）

score 0 · Accepted Answer

与 TS 溶液反应

  const btnRef = useRef<HTMLButtonElement | null>(null);
  const handleOnMouseUp = () => {
    btnRef.current?.blur();
  };
  
  <button
    ref={btnRef}
    onClick={handleOnClick}
    onMouseUp={handleOnMouseUp}
  >
    <span className="icon-plus"></span> Add Page
  </button>

score 0 · Accepted Answer

对于 sass 用户，Bootstrap 4 应该通过覆盖变量来操作。

如果要禁用围绕按钮的焦点框阴影：

$btn-focus-box-shadow: none;

您还可以使用以下方法禁用焦点周围输入的框阴影：

$input-focus-box-shadow: none;

或者两者都有一个变量：

$input-btn-focus-box-shadow: none;

score 0 · Accepted Answer

我在使用<a>充当按钮时遇到了同样的问题，我发现~~我错过~~了一个解决方法，通过添加 attrtype="button"使其至少对我来说表现正常。

<a type="button" class="btn btn-primary">Release Me!</a>

score 0 · Accepted Answer

如果这button:focus {box-shadow: none}对您不起作用，可能会有一些库添加边框，就像我的情况一样，使用 pseudo-selector ::after。

因此，我使用以下解决方案删除了显示在焦点上的边框：

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

score 0 · Accepted Answer

直接在 html 标记中（在您可能希望将引导主题留在设计中的其他位置的情况下）..

尝试的例子..

<button style="border: transparent;">

<button style="border: 1px solid black;">

..等，。取决于想要的效果。

score 0 · Accepted Answer

尽管这里提供的 CSS 解决方案有效，

对于喜欢使用Bootstrap 4 方式的任何人，正如官方Bootstrap 主题指南中所建议的那样，这应该会有所帮助：

在您添加变量覆盖的 custom.scss 文件（请参阅上面的指南 ^）中，添加以下变量以删除按钮的框阴影：

// import bootstrap's variables & functions to override them
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// override the variables you want (you can look them up in node_modules/bootstrap/scss/variables file, they're the ones that have the !default keyword at the end)
$btn-focus-box-shadow: none;

// option A: include all of Bootstrap (see the above guide for other options)
@import "node_modules/bootstrap/scss/bootstrap";

这对我有用。

请注意，引导程序的变量文件中有许多变量用于 box-shadow 以及其他控件，因此如果您想使用它们和/或这个特定变量对您不起作用，您可能需要进行更多研究.

score -1 · Accepted Answer

在脚本中添加这个

$(document).ready(function() {
    $('#addBtn').focus(function() {
        this.blur();
    });
});

score -1 · Accepted Answer

如果您不想要具有所有状态的按钮的轮廓，您可以使用以下代码覆盖 css

.btn.active.focus, .btn.active:focus, 
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus{
  outline: none;
}

score -2 · Accepted Answer

我很好奇为什么有人要删除大纲。就像许多人提到的那样，如果您删除大纲，则会出现可访问性问题。使用屏幕阅读器等辅助技术的用户在访问网站/应用程序时需要知道焦点在哪里。我知道按钮周围的蓝色可能会“搞砸”设计，但是，您可以使用 CSS 更改颜色：

outline-color: your color hex here;

您可以编辑它的另一种方法是在焦点上添加边界。

score -2 · Accepted Answer

您可以使用按钮的焦点事件。这在有角度的情况下有效

<button (focus)=false >Click</button

score -2 · Accepted Answer

对于我从解决方案中使用的 AngularJS 开发人员：

var element = $window.document.getElementById("export-button");
    if (element){
        element.blur();
    }

记得注入 $window。

score -3 · Accepted Answer

只需尝试其中一种：

outline:0; 或 outline:0px; 或 outline: none;

和 $(this).trigger("blur");

html - 如何在单击时消除按钮周围的焦点

45 回答 45

2021焦点可见解决方案

选项 1：使用:focus-visible伪类

选项 2：使用.focus-visiblepolyfill

选项 3：使用全局键导航与鼠标导航状态

关于可访问性的说明

Related

Reference

选项 1：使用`:focus-visible`伪类

选项 2：使用`.focus-visible`polyfill