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

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

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

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

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

当前回答

使用focus-visible

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

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

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

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

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

警告:截至2021年，:focus-visible伪类在现代浏览器中得到广泛支持，但在边缘浏览器中失败**。如果旧浏览器的支持很重要，下面选项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 polyfill

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

注意:在Chrome中，polyfill似乎对待选择不同于原生的:焦点可见伪类。

/** * 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:使用全局键导航和鼠标导航状态

一个反解决方案的焦点可见，是禁用轮廓在鼠标移动，并使他们在keydown -> "Tab"。在这种情况下，您必须指定哪些元素应该显示大纲，而不是指定哪些元素不应该显示大纲。

关于可访问性的说明

删除所有焦点环la:focus {outline: none;}或:焦点{大纲:0;}是一个已知的可访问性问题，永远不建议使用。此外，在可访问性社区中，有些人希望你永远不要删除焦点环轮廓，而是让所有内容都具有:focus样式——如果样式适当，轮廓或框影都可以有效。

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. As of 2022, Chrome browser has exposed a user preference to set focus visibility styles, but FireFox has not.

资源:

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

演示:

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

2020-02-14 03:34:32

其他回答

风格

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

使用

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

2015-08-11 17:59:48

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

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

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

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

2017-08-16 20:01:56

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

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

这应该避免!

.btn:focus {
  outline: none;
}

2014-07-30 14:57:12

这是工作，希望能帮到你

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

2017-01-31 21:56:56

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

2016-03-02 11:59:22

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

推荐文章

最新文章

标签