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

我的按钮都有一个高亮后，我点击他们。这是Chrome。

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

我正在使用带有主题的Bootstrap，但我非常确定这不是它:我以前在另一个项目中注意到这一点。

如果我使用<a>标签而不是<button>，它就会消失。为什么?如果我想使用<button>，我怎么让它消失呢?

当前回答

虽然很容易删除所有焦点按钮的轮廓(如user1933897的答案)，但从可访问性的角度来看，这种解决方案是糟糕的(例如，参见停止破坏浏览器的默认焦点轮廓)。

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

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

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

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

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

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

2015-05-08 08:36:24

其他回答

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

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

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

function runFn(thisElem){控制台.log(“你好”，thisElem);的

2020-01-27 03:58:25

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

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

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

2021-09-14 19:32:02

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

我添加

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

它的工作原理。

2018-08-08 09:41:29

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

你可以使用的一些技巧，包括添加:focus {outline: none;}规则，并在检测到键盘交互时再次删除它们。林赛·埃文斯为此做了一个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>

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

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

2015-12-01 13:36:19

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

*:focus {
  outline: 0 !important;
}

2021-03-03 09:46:02

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

推荐文章

最新文章

标签