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

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

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

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

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

当前回答

我们遇到了类似的问题，并注意到Bootstrap 3 . 在他们的标签上没有问题(在Chrome中)。它看起来像他们使用的大纲风格，让浏览器决定什么是最好的，Chrome似乎做了你想要的:显示大纲时，聚焦，除非你只是点击元素。

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

2016-02-01 21:11:36

其他回答

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

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

$btn-focus-box-shadow: none;

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

$input-focus-box-shadow: none;

或者两者都有一个变量:

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

2019-10-08 13:22:05

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

2021-05-11 10:10:28

这是工作，希望能帮到你

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

2017-01-31 21:56:56

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

如果你使用规则: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

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

推荐文章

最新文章

标签