小开

最佳答案

我在另一个页面上找到了这个问题和回答，覆盖按钮焦点样式对我有用。这个问题可能是Chrome的MacOS特有的。

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

请注意，这对可访问性有影响，除非你的按钮和输入有一个良好的一致的焦点状态，否则不建议这样做。根据下面的评论，有些用户不能使用鼠标。

小开

如果以上方法对你不起作用，试试下面的方法:

< p >。Btn:焦点{轮廓:无;框影:无;边框:2px实体透明;}< / p >

正如user1933897所指出的，这可能是针对MacOS和Chrome的。

小开

我也注意到了同样的情况，尽管这真的让我很恼火，但我相信没有合适的方法来处理这个问题。

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

这应该避免!

.btn:focus {
outline: none;
}

小开

你想要的是:

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

.blur()方法正确地删除了焦点高亮显示，并且不会弄乱bootstrap的样式。

小开

虽然很容易删除所有聚焦按钮的轮廓(如user1933897的回答)，但从可访问性的角度来看，这个解决方案很糟糕(例如，参见不要乱动浏览器的默认焦点轮廓)。

另一方面，如果浏览器在你点击按钮后认为它是聚焦的，那么它可能不可能说服你停止将你点击的按钮样式设置为聚焦(我在看着你，OS X上的Chrome)。

那么，我们能做什么呢?我想到了几个选择。

1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })

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

2) css: __abc0

这里你只关闭徘徊按钮的outline。显然这不是理想的，但在某些情况下可能足够了。

小开

我在上面的评论中提到了这一点，但为了清晰起见，有必要把它作为一个单独的答案列出。只要你不需要在按钮上设置焦点，你可以在它应用任何CSS效果之前使用焦点事件删除它:

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

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

小开

风格

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

使用

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

小开

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

你可以使用的hack是差不多可以，包括在用户与鼠标交互时添加:focus { outline: none; }规则，并在检测到键盘交互时再次删除它们。林赛·埃文斯已经为它创建了一个库: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>

我确实整理了一个Pen: http://codepen.io/snobojohan/pen/RWXXmp

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

小开

真不敢相信居然没人贴出来。

使用标签而不是按钮。

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

< a href = " http://jsfiddle.net/hkjrztwe/ " >小提琴< / >

小开

试试其中一个吧:

< p > outline:0; 或 outline:0px; 或 outline: none; < / p > < p >和 $(this).trigger("blur"); < / p >

小开

我们遇到了类似的问题，并注意到Bootstrap 3 在他们的标签上没有问题(在Chrome中)。看起来他们正在使用outline-style，这允许浏览器决定最好做什么，Chrome似乎做了你想要的:当聚焦时显示大纲，除非你只是单击元素

对outline-style的支持很难确定，因为浏览器要决定它的含义。最好检查几个浏览器，并有一个回退规则。

小开

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

例子:

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

不过，如果您还没有使用事件侦听器，添加一个事件侦听器来解决这个问题可能会增加不必要的开销，像前面的回答提供的样式解决方案会更好。

小开

另一种可能的解决方案是在用户单击按钮时使用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/ < / p >

小开

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

我目前正在使用这个解决方案(在react-bootstrap项目中)，我没有收到一个焦点闪烁或保留的按钮点击后的焦点，但我仍然能够标签我的焦点和视觉上可视化相同按钮的焦点。

小开

尝试这个解决方案删除按钮周围的边界。将此代码添加到css中。

试一试

button:focus{
outline:0px;
}

如果不工作，然后使用下面。

button:focus{
outline:none !important;
}

小开

这是工作，希望能帮到你

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

小开

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

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

HTML看起来像这样:

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

这样你就可以保留btn和它相关的行为。

小开

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

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

小开

这对我来说是可行的，另一个没有提到的解决方案。只要把它扔在点击事件…

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

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

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

小开

这对我很管用。我创建了一个自定义类，覆盖必要的CSS。< / p >

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

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

小开

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

这个大纲:没有将工作的按钮和标签

小开

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

其他“修复”建议这里，只删除焦点轮廓，但仍然留下按钮表。然而，从可用性的角度来看，你已经删除了辉光，所以你的用户不会知道当前聚焦的按钮是什么。

另一方面，使按钮非表格有可访问性的影响。

我用它来删除焦点轮廓从X按钮在bootstrap modal，其中有重复的“关闭”按钮在底部的任何方式，所以我的解决方案对可访问性没有影响。

小开

如果你正在使用webkit浏览器(可能是与webkit供应商前缀兼容的浏览器)，则该大纲属于按钮的-webkit-focus-ring伪类。简单地将它的outline设置为none:

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

Chrome是这样一个webkit浏览器，这种效果也发生在Linux上(不仅仅是macOS的事情，尽管一些Chrome样式是 macOS)

小开

对于解决方案中使用的AngularJS开发人员:

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

记住注入$window。

小开

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

这将在点击时删除轮廓，但在点击时保持焦点(对于a11y)

小开

这样效果最好

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

小开

我找到解决方案。当我们聚焦时，bootstrap使用box-shadow，所以我们只是禁用它(声誉不够，无法上传图像:).

我添加

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

它的工作原理。

小开

在CSS中添加这个:

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

小开

对于想要一个纯css方式的人来说:

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

这也可以为链接等工作，和奖金，它保持键盘的可访问性。最后，它被不支持焦点可见的浏览器忽略

小开

将此添加到脚本中

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

小开

我有同样的问题使用<a>作为按钮，我发现~~我错过了~~的一个解决办法，添加attr type="button"使它的行为正常为我至少。

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

小开

直接在HTML标签中(在您可能想要在设计的其他地方留下引导主题的场景中)..

尝试的例子..

<button style="border: transparent;">

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

. .等。这取决于你想要的效果。

小开

对于sass用户，引导4应该通过重写变量来操作。

如果你想禁用按钮周围焦点上的框影:

$btn-focus-box-shadow: none;

你也可以禁用输入周围焦点上的框影:

$input-focus-box-shadow: none;

或者两者都有一个变量:

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

小开

你可以使用按钮的焦点事件。这适用于angular

的情况

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

小开

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

button:focus { outline: none }

小开

我没有找到不破坏易用性或颠覆功能的可靠答案。

也许结合一些会更好地发挥整体作用。

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

小开

使用focus-visible

注1:在下面列出的3个选项中，按钮的行为是相同的(点击时没有焦点环)，但选择和输入的默认行为略有不同 Only选项3一致地删除按钮、输入和选择周围的焦点环。请比较所有的方法，并确保您理解其中的含义。

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

注3:任何focus-visible方法都仍然存在一些可访问性问题。也就是说，在浏览器公开一个配置让用户选择何时显示可见的焦点环之前，焦点-可见应该被认为比始终在任何地方使用焦点环的可访问性更差，但比这个问题的其他答案中提到的有害的:focus {outline:none}方法要好。参见“关于可访问性的说明”;部分在这个答案的底部了解更多细节。

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

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

警告:自2021年起，:focus-visible伪类在现代浏览器中广泛支持，但在边缘浏览器上失败**. c。如果旧浏览器的支持很重要，下面选项2中的Javascript填充是最接近的。

/** * 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填充

这个解决方案使用了一个普通的CSS类，而不是上面提到的伪类，并且有更广泛的浏览器支持(在2021年)。它需要1或2个javascript脚本添加到您的HTML;一个用于官方焦点可见的填充材料，另一个用于没有支持班级名册的旧浏览器。

注意:在Chrome中，polyfill处理select的方式似乎与原生: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>  <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/

演示:

< a href = " https://wicg.github。io / focus-visible /演示/ noreferrer“rel = > https://wicg.github.io/focus-visible/demo/ < / >

小开

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

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

2) button type="button" className="btn-cart" onclick={this.blur}
这两个解决方案都将删除按钮周围突出显示的部分即-> blur()有自己的规范，其中删除突出显示的部分

小开

有点核，但这是我在Angular 9上工作的简单方法。使用与因果关系，因为它影响每个html元素。

*:focus { outline: 0 !important; }

小开

虽然这里提供的CSS解决方案有效，

对于任何喜欢使用Bootstrap 4方式的人，如官方引导主题指南中所建议的，这应该有帮助:

按你们的习惯。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";

这对我很有用。

请注意，在bootstrap的变量文件中有许多变量用于box-shadow，也用于其他控件，所以如果你想使用它们和/或这个特定的变量不适合你，可能需要更多的研究。

小开

与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>

小开

如果你想在mousedown而不是键盘tab上完成轮廓的删除，并且你正在使用VueJS，下面是解决方案:

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

这基本上阻止它在点击时接收焦点，但任何其他接收焦点的方式都保持活跃。

小开

对于任何使用react-bootstrap并遇到此问题的人，以下是我所做的工作:

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

在添加!important之前，事情并没有工作。

小开

我很好奇为什么有人想要删除轮廓。就像许多人提到的，如果你删除大纲，就会有可访问性问题。使用屏幕阅读器等辅助技术的用户在访问网站/应用程序时需要知道重点在哪里。我知道按钮周围的蓝色会“搞砸”。但是，你可以使用下面的方法来改变CSS的颜色:

outline-color: your color hex here;

另一种编辑方法是在焦点上添加边框。

小开

如果button:focus {box-shadow: none}不适合你，可能会有一些库添加边界，就像我的情况下，使用伪选择器::after。

所以我用以下解决方案删除了显示在焦点上的边界:

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

小开

在使用bootstrap (v4.4.1)类的表单中使用提交按钮时，我发现了同样的情况。当我使用JavaScript构建单页面用户界面来操作DOM的所有必需更改时，出现了这个问题。表单数据通过使用JSON字符串而不是HTTP POST请求“fetch”提交给服务器。注意，通常表单的默认行为是重新加载文档，通常这将刷新按钮，但是表单的默认行为是通过在表单的提交事件的侦听器函数中使用e.c preventdefault()来阻止的(它是一个单页UI，因此文档永远不会重新加载，并且到服务器的流量只会最小化到数据)。由于文档没有重新加载，该按钮似乎一直按下，直到用户单击窗口的其他地方。这是我(对这个问题)的看法:

<input type="submit" class="btn btn-primary">

这是我用来解决按钮一直按下的问题:

<input type="submit" class="btn btn-primary" onmouseup="this.blur()">

如何删除点击按钮周围的焦点

使用focus-visible

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

选项2:使用`.focus-visible`填充

选项3:使用全局键导航和鼠标导航状态

关于可访问性的说明

如何删除点击按钮周围的焦点

使用focus-visible

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

选项2:使用.focus-visible填充

选项3:使用全局键导航和鼠标导航状态

关于可访问性的说明

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

选项2:使用`.focus-visible`填充