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

Question

点击它们后,我的按钮周围都有一个突出显示.这是在Chrome中.

<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

OPTION 1: Use the :focus-visible pseudo-class

The :focus-visible pseudo-class can be used to kill the unsightly outlines and focus rings on buttons and various elements for users that are NOT navigating via keyboard (i.e., via touch or mouse click).

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

Warning: As of 2020, the :focus-visible pseudo-class is not widely supported across browsers. However the polyfill is very easy to use; see instructions below.

OPTION 2: Use the .focus-visible polyfill

This solution uses a normal CSS class instead of the pseudo-class mentioned above, and has wide browser support because it is an official Javascript-based polyfill.

Step 1: Add the Javascript dependencies to your HTML page

Note: the focus-visible polyfill requires an additional polyfill for several older browsers that don't support classList:

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

Step 2: Add the following CSS to your stylesheet

The following is a modified version of the CSS solution documented more thoroughly above.

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

Step 3 (optional): use 'focus-visible' class where necessary

If you have any items where you actually do want to show the focus ring when someone clicks or uses touch, then just add the focus-visible class to the DOM element.

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

OPTION 3: Use a global key-navigation vs mouse-navigation state

An inverse solution to focus-visible, is to disable outlines on mousemove, and enable them on keydown -> "Tab". In this case, rather than specifying which elements shouldn't show an outline, you must specify which elements should.

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

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

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

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

A note about accessibility

Removing all focus rings a la :focus { outline: none; } or :focus { outline: 0; } is a known accessibility issue and is never recommended. Additionally, there are folks in the accessibility community who would rather you never remove a focus ring outline and instead make everything have a :focus style — either outline or box-shadow could be valid if styled appropriately.

Finally, some folks in the accessibility community believe developers should not implement :focus-visible on their websites until all browsers implement and expose a user preference which lets people pick whether all items should be focusable or not. I personally don't subscribe to this thinking, which is why I provided this solution that I feel is far better than the harmful :focus { outline:none }. I think :focus-visible is a happy medium between design concerns and accessibility concerns.

Resource:

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

Demo:

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

Answer 5

虽然很容易删除所有聚焦按钮的轮廓(如user1933897的答案),但从可访问性的角度来看,该解决方案很糟糕(例如,请参阅使用浏览器的默认焦点轮廓停止混乱)

另一方面,如果您认为点击按钮后点击它(我在看OS,操作系统X上的Chrome),则可能无法说服您的浏览器停止将您点击的按钮设置为关注按钮.

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

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

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

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

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

Answer 6

不敢相信没人发布这个.

使用标签而不是按钮.

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

小提琴

Answer 7

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

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

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

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

Answer 8

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

我加

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

有用。

Answer 9

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

你可以使用的黑客,没关系,包括: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 10

这对我有用.我创建了一个自定义类来覆盖必要的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 11

如果以上方法对您不起作用，请尝试以下操作：

.btn:focus {outline: none;box-shadow: none;border:2px 实心透明;}

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

Answer 12

我注意到了同样的事情,即使它真的让我烦恼,我相信没有正确的处理方法.

我建议不要给出所有其他解决方案,因为它们完全取消了按钮的可访问性,所以现在,当你选中按钮时,你将无法获得预期的焦点.

这应该避免!

.btn:focus {
  outline: none;
}

Answer 13

迟到了，但是谁知道这可能会帮助某个人。CSS看起来像：

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

HTML看起来像：

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

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

Answer 14

我在使用引导程序（v4.4.1）类的表单中使用提交按钮发现了相同的情况。当我使用 JavaScript 构建单页用户界面来操作 DOM 所需的所有更改时，问题就出现了。表单数据使用 JSON 字符串而不是 HTTP POST 请求通过“fetch”提交到服务器。请注意，通常表单的默认行为是重新加载文档，通常这会刷新按钮，但是通过在表单的提交事件的侦听器函数中使用 e.preventDefault() 来阻止表单的默认行为（它是一个单-页面 UI，因此文档永远不会重新加载，并且服务器的流量被最小化为仅数据）。鉴于文档未重新加载，该按钮似乎一直处于按下状态，直到用户单击窗口中的其他位置。这就是我所遇到的（有问题）：

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

这就是我用来解决按钮保持按下状态的问题：

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