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

Question

点击它们后，我的按钮周围都有一个高亮显示。这是在Chrome中。

Unselected

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

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

如果我使用<a>标记而不是<button>，它就会消失。为什么？如果我想使用<button>，我该如何让它消失？

Answer 1

我在另一个页面上找到了这个Q和A，并且覆盖按钮焦点样式对我有用。此问题可能特定于MacOS with Chrome。

.btn:focus {
  outline: none;
}

请注意，这会对可访问性产生影响，并且在您的按钮和输入具有良好的一致焦点状态之前，不建议这样做。根据下面的评论，有些用户不能使用鼠标。

Answer 2

你想要这样的东西：

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

.blur（）方法正确地删除焦点突出显示，并且不会弄乱Bootstraps的样式。

Answer 3

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

我目前正在使用此解决方案（在react-bootstrap项目中）并且在点击后我没有收到焦点闪烁或保留按钮焦点，但我仍然可以选中焦点并在视觉上可视化焦点相同的按钮。

Answer 4

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

另一方面，如果单击按钮后认为它的焦点集中（我正在看着你，OS X上的Chrome），那么你可能无法说服你的浏览器停止设置点击按钮的样式。 p>

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

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

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

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

此处仅关闭悬停按钮的大纲。显然它不理想，但在某些情况下可能就足够了。

Answer 5

无法相信没人发布此内容。

使用标签代替按钮。

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

Fiddle

Answer 6

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

:focus-visible伪类可用于杀死难看的轮廓，并为不通过键盘（即，通过触摸或鼠标单击）导航的用户锁定按钮和各种元素上的圆环。

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

警告：截至2020年，:focus-visible pseudo-class is not widely supported across browsers。但是，polyfill非常易于使用。请参阅下面的说明。

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

此解决方案使用普通的CSS类而非上述的伪类，并且由于它是an official Javascript-based polyfill，因此具有广泛的浏览器支持。

第1步：将Javascript依赖项添加到HTML页面

注意：对于某些support classList没有的旧版浏览器，焦点可见的polyfill需要额外的polyfill：

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

步骤2：将以下CSS添加到样式表中

以下是CSS解决方案的修改版本，在上面有更详尽的记录。

/**
 * Custom cross-browser styles for keyboard :focus overrides defaults.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069 !important;
}

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

第3步（可选）：在必要时使用“焦点可见”类

如果您确实想在有人单击或触摸时显示聚焦环，则只需将focus-visible类添加到DOM元素中即可。

<!-- This example uses Bootstrap classes to theme a button to appear like
     a regular link, and then add a focus ring when the link is clicked --->
<button type="button" class="btn btn-text focus-visible">
  Clicking me shows a focus box
</button>

资源：

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

演示：

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

Answer 7

这适用于我，另一个未提及的解决方案。把它扔进点击事件......

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

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

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

Answer 8

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

您可以使用的排序好的黑客，包括在用户与鼠标交互时添加:focus { outline: none; }规则，如果检测到键盘交互则再次删除它们。 Lindsay Evans为此创建了一个lib：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/

Answer 9

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

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

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

Answer 10

我已经注意到了同样的事情，尽管它让我感到很恼火，但我相信没有正确的处理方法。

我建议不要使用所有其他解决方案，因为它们会完全取消按钮的可访问性，所以现在，当您选中按钮时，您将无法获得预期的焦点。

应该避免这种情况！

.btn:focus {
  outline: none;
}

Answer 11

迟到了，但谁知道它可能对某人有所帮助。 CSS看起来像：

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

HTML看起来像：

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

这样你就可以保持btn及其相关的行为。

Answer 12

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

.btn：focus {outline：none; box-shadow：none; border：2px solid 透明;}

正如用户1933897所指出的，这可能是特定于MacOS with Chrome。

Answer 13

风格

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

使用

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

Answer 14

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

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

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

Answer 15

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

Answer 16

尝试使用此解决方案删除按钮周围的边框。在css中添加此代码。

尝试

button:focus{
outline:0px;
}

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

button:focus{
 outline:none !important;
 }

Answer 17

这是工作，我希望能帮到你

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

Answer 18

我们遇到了类似的问题并注意到Bootstrap 3 它们的标签上没有问题（在Chrome中）。看起来他们正在使用outline-style，它允许浏览器决定做什么，Chrome似乎做你想做的事情：除非你点击元素，否则在聚焦时显示轮廓。

支持outline-style很难确定，因为浏览器决定了这意味着什么。最好在几个浏览器中查看并制定一个后备规则。

Answer 19

对于那些希望使用纯CSS方法做到这一点的人：

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

这也可以用于链接等等，而且，它可以保持键盘的可访问性。最后，不支持：focus-visible

的浏览器将忽略它

Answer 20

我找到了解决方案。当我们集中精力时，引导程序会使用阴影框，因此我们仅将其禁用（信誉不足，无法上传图片:(）。

我添加

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

有效。

Answer 21

效果最好

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

Answer 22

我找到了一个解决方案，只需在您的CSS代码的下面添加一行即可。

button:focus { outline: none }

Answer 23

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

也许将一些结合起来总体上会更好。

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

Answer 24

在CSS中添加它：

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

Answer 25

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

这会删除点击时的轮廓，但在标签时保持焦点（对于a11y）

Answer 26

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

*:focus {
  outline: 0 !important;
}

Answer 27

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

这个大纲：没有一个适用于按钮和标签

Answer 28

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

对于喜欢使用 Bootstrap 4 方式的任何人，如官方 Bootstrap Theming guide 中所建议，这应该会有所帮助：

在您添加变量覆盖的 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";

这对我有用。

请注意 bootstrap 的变量文件中有很多变量用于 box-shadow 和其他控件，因此如果您想使用它们和/或者这个特定的变量对你不起作用。

Answer 29

对于使用 class TaskFilter { public static void main(String[] args) { // Sample user input boolean isCompleted = true; LocalDate fromDate = LocalDate.parse("2020-11-04"); LocalDate toDate = LocalDate.parse("2021-11-06"); // Simulate data retrieved from JPA repository eg repository.findAll() List<Task> tasks = List.of( new Task("1", true, LocalDate.parse("2020-10-04")), new Task("2", false, LocalDate.parse("2010-12-02")), new Task("3", false, LocalDate.parse("2021-04-24")), new Task("4", true, LocalDate.parse("2021-03-12")) ); // Create a stream on retrieved data Stream<Task> tasksStream = tasks.stream(); // Filter that stream based on user input if(isCompleted) { tasksStream = tasksStream.filter(task -> task.isCompleted()); } if(fromDate != null) { tasksStream = tasksStream.filter(task -> task.getCompletedAt().isAfter(fromDate)); } if(toDate != null) { tasksStream = tasksStream.filter(task -> task.getCompletedAt().isBefore(toDate)); } // Finally collect that in a list. This is a must operation, because stream is not executed unless terminal operation is called. List<Task> filteredTaskList = tasksStream.collect(Collectors.toList()); System.out.println(filteredTaskList); } } 并遇到此问题的任何人，以下是我为使其正常工作所做的工作：

react-bootstrap

在添加 .btn:focus { /* the !important is really the key here, it overrides everything else */ outline: none !important; box-shadow: none !important; } 之前，事情不起作用。

Answer 30

这是两种可能的解决方案。

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

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

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

Answer 31

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

即可

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

Chrome就是这样一个webkit浏览器，这种效果也发生在Linux上（不仅仅是macOS的东西，虽然有些Chrome样式只是 macOS）

Answer 32

使用 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>

Answer 33

如果您想在 mousedown 上而不是在键盘 tab 上完成大纲的删除，并且您正在使用 VueJS，那么解决方案如下：

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

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

Answer 34

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

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

Answer 35

直接在html标签中（在您可能希望将bootstrap主题保留在设计中其他位置的情况下）。

尝试的例子。

<button style="border: transparent;">

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

.. ect ,.取决于所需的效果。

Answer 36

使用<a>作为按钮时，我遇到了同样的问题，我发现~~我不见了~~，通过添加attr type="button"使其至少对我来说是正常的。

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

Answer 37

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

其他＆＃34;修复＆＃34;这里建议，只删除焦点轮廓，但仍然可以按钮显示。但是，从可用性的角度来看，您已经删除了发光，因此您的用户无论如何都不会知道当前关注的按钮。

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

我使用它从bootstrap modal中的X按钮移除焦点轮廓，其中有重复的＆＃34;关闭＆＃34;任何方式底部的按钮，所以我的解决方案对可访问性没有影响。

Answer 38

我在MacOS和Chrome上遇到同样的问题，同时使用按钮触发＆＃34;过渡＆＃34;事件。如果读取此内容的任何人已经在使用事件监听器，您可以在执行操作后致电.blur()来解决此问题。

示例：

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

虽然如果你还没有使用事件监听器，只需添加一个就可以解决这个问题，这可能会增加不必要的开销，而像之前的答案提供的样式解决方案更好。

Answer 39

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

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

$btn-focus-box-shadow: none;

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

$input-focus-box-shadow: none;

或同时使用一个变量：

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

Answer 40

在脚本

中添加它

<form name=f1 method=post enctype="multipart/form-data">
    <input id="uploadPDF" type="file" name="file"/>&nbsp;
    <input type="button" value="Preview" onclick="PreviewImage();" />

    <div style="clear:both">
       <iframe id="viewer" frameborder="0" scrolling="no" width="300" height="200"></iframe>
    </div>
    <button type="submit" name="submit" class="btn btn-success btn-sm">
      <i class="fa fa-dot-circle-o"></i> Add
    </button>&emsp;
</form>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Answer 41

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

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

记得注入$ window。

Answer 42

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

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

Answer 43

就像许多人提到的那样，如果您将其删除，则会存在可访问性问题。使用辅助技术的用户在访问网站/应用程序时需要知道重点在哪里。我知道按钮周围的蓝色会“弄乱”设计，但是您可以使用 CSS 更改颜色：

outline-color: your color hex here;

Answer 44

只需将outline:0; css添加到元素中。

如何在点击按钮周围移除焦点

44 个答案:

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

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

第1步：将Javascript依赖项添加到HTML页面

步骤2：将以下CSS添加到样式表中

第3步（可选）：在必要时使用“焦点可见”类

如何在点击按钮周围移除焦点

44 个答案:

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

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

第1步：将Javascript依赖项添加到HTML页面

步骤2：将以下CSS添加到样式表中

第3步（可选）：在必要时使用“焦点可见”类

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

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