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

225

单击按钮后，所有按钮周围都有高亮显示。这是在Chrome中。

未选择 已选

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

我正在使用带有主题的Bootstrap，但我敢肯定不是这样：我之前在另一个项目中注意到这一点。

如果我使用<a>标记代替，它将消失<button>。为什么？如果我想使用<button>该如何使它消失？

html  css  twitter-bootstrap 
— 肖恩·克拉克·赫斯
source
12
轮廓：0 可能会让您感兴趣
— Wiggler Jtag 2013年
单击后是否添加任何班级？
— 库兹贡
1
大纲：0似乎无济于事，webkit的外观也无济于事
— Sean Clark Hess 2013年
7
28个答案都表明解决此问题的不同方法证明了当今前端Web开发的遗憾状态。
— deltanine
3
人们认为此可访问性功能是一个问题，这证明了当今前端Web开发的令人遗憾的状态。
— Quentin

Answers:

292

我在另一页上找到了此问与答，并且覆盖按钮焦点样式对我来说很有用。此问题可能特定于带有Chrome的MacOS。

.btn:focus {
  outline: none;
  box-shadow: none;
}

但是请注意，这会影响可访问性，只有在按钮和输入的焦点状态保持一致后才建议这样做。根据下面的评论，那里有不能使用鼠标的用户。

— 杰里米亚797
source
33
我也想到了这一点，但是删除大纲是否存在可访问性问题？
— silvenon 2014年
10
我想我们别无选择。您也可以添加.btn:active:focus选择器以将其从活动状态中删除。
— silvenon 2014年
45
从按钮上删除轮廓绝对不利于可访问性。有些用户无法控制鼠标，并且需要能够使用键盘在页面上切换。删除轮廓非常困难。最好防止按钮引起对点击的关注。
— 墨菲（Murphy Randle）
对于将来的旅行者，此代码完全替换了默认按钮（不是所有按钮）的所有按钮状态上的所有样式：.btn-default, .btn-default:hover, .btn-default:active, .btn-default:active:focus, .btn-default:visited, .btn-default:focus { color: #dcdcdc; background-color: #232323; outline: none; }
— Geordie
1
如果使用内置的引导程序变量，则可以通过将以下两个变量设置为：$ btn-focus-width：0; $ btn-focus-box-shadow：none;
— 高速火车
109

您想要类似的东西：

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

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

— Cshotton
source
9
这会短暂显示大纲，但仍然会破坏它：/
— silvenon 2014年
2
如果我触发焦点事件而不是click事件，则看不到任何闪烁。
— 查尔斯
2
效果很好！如果我尝试将不同的click（）事件处理程序（即，单击所述按钮时执行的代码）附加到同一按钮，是否会出现潜在问题？
— Nils_e 2015年
4
如果有人在想这是否可以在Bootstrap v4中使用，它确实可以。答案在2018年仍然有效，加油！
— jreed '18年
4
与最受欢迎的问题相比，它的可访问性还可以吗？
— CharlesM
47

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

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

— js
source
2
是。您的解决方案有效。谢谢你的提示。这是解决方案的小提琴。但这需要将javascript处理程序附加到每个按钮。如果我们可以通过仅CSS解决方案实现这一目标，那就太好了。
— Galeel Bhasha
1
我认为人们希望当您单击某个元素时将焦点放在某个元素上，而这种解决方案可以防止这种情况发生。我经常单击一个元素，然后在松开鼠标以使其聚焦之前移开，这样我就可以从其上跳动了。
— Michael Tontchev
7
对于浏览摘要的任何人，这都应该起作用并保留onClick：onMouseDown={e => e.preventDefault()}
— Adam K Dean
1
这样可以防止空格键和返回键“单击”按钮。也许更完整的解决方案是添加：onKeyUp={(e) => {if (e.keyCode === 13 || e.keyCode === 32) handleClick()}。
— jfbloom22 '18
您不应在onKeyUp事件内部调用e.preventDefault（）。事实证明，如果您这样做，则在按下空格键或回车键并点按或单击任意位置后，按钮将保持焦点。
— jfbloom22 '18
30

不敢相信还没有人发布此消息。

使用标签代替按钮。

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

小提琴

— 亚当·麦肯纳
source
11
这对大多数用户来说效果很好，但是这种方法对屏幕阅读器或键盘并不友好，并且会导致盲人用户以及运动技能受损的用户无法与按钮进行交互。
— Murphy Randle
8
1.用<a>标签替换标签。以便可以通过键盘对其进行访问。2.添加aria-role =“ button”以提高屏幕阅读器用户的可访问性。 Fiddle更新
— Galeel Bhasha
不错的解决方案，对我有帮助，但是即使使用包装器也无法以某种方式使用角度指令，例如<a class="btn"><my-directive/></a>
— ya_dimon
2
非鼠标用户在跳动时会完全跳过标签，不利于可访问性
— Felipe
1
在Bootstrap 4中，它似乎改变了按钮的外观。
— 杰森·金
30

尽管只删除所有焦点按钮的轮廓很容易（如user1933897的答案所示），但是从可访问性的角度来看，该解决方案是不好的（例如，请参见使用浏览器的默认焦点轮廓停止处理）

另一方面，如果您认为浏览器在单击后就集中了焦点，那么就不可能说服您的浏览器停止将所单击的按钮设置为具有焦点（我在看着您，OS X上的Chrome）。

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

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

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

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

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

— 亚历克西斯
source
4
数字1是有用的提示。当不按下按钮时，它将禁用焦点，但是在按下按钮时，它将保持显示状态。我已通过禁用了对单击的活动元素的关注:active:focus {outline:none;}。
— 肯定
绑定事件侦听器的速记函数已在jQuery中弃用，因此最好使用.on('mouseup', function() { ... })而不是.mouseup()
— Crazy Redd
16

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

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

在此处输入图片说明

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

— men_aka
source
为我工作，但我必须删除border: none !important;按钮以保持相同的尺寸
— Emeka Mbah '18
1
我一直在寻找删除答案上方的onClick焦点的方法，但是“框阴影：无！重要；” 它对我的工作表示感谢@Menaka
— Zaif Warm
11

这对我有用，没有提到另一个解决方案。只需将其放入click事件中...

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

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

$(".btn_name").trigger("blur");
— 抢
source
问题在于，当键盘用户“点击”按钮时（通过将其聚焦然后按下空格键），它失去了焦点。然后，您必须将选项卡一直返回到您所在的位置。😡–
— Tamlyn
8

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

可以使用的技巧很不错，包括:focus { outline: none; }在用户与鼠标进行交互时添加规则，并在检测到键盘交互时再次将其删除。Lindsay Evans为此创建了一个库：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>

我确实给了togheter一支钢笔：http ://codepen.io/snobojohan/pen/RWXXmp

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

— 斯诺博霍汗
source
6

我注意到了同样的事情，即使它确实让我感到烦恼，但我相信没有适当的方法来处理此问题。

我建议不要使用给出的所有其他解决方案，因为它们会完全破坏按钮的可访问性，因此，现在，当您按一下该按钮时，就不会获得预期的焦点。

应该避免这种情况！

.btn:focus {
  outline: none;
}
— 奥斯卡·波拉尼奥斯（OscarBolaños）
source
我不认为这是错误的，因为聚焦时按钮上的闪电仍然略有不同，因此即使是键盘用户也仍然可以识别。但这还不够，因为当您按住鼠标左键时仍然会得到边框
— apocalypz 2014年
6

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

我加 

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

有用。

— 奶糖
source
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伪类在各种浏览器中均不受广泛支持。但是，polyfill非常易于使用。请参阅下面的说明。


选项2：使用 .focus-visible polyfill

此解决方案使用普通的CSS类而不是上述的伪类，并且具有广泛的浏览器支持，因为 基于Javascript的官方polyfill。

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

注意：对于多个不支持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>

资源：

演示：

— 詹姆斯·威尔森
source
但是，即使Chrome尚不支持它，也可能不是最好的解决方案（目前）
— Elijah Mock，
您有什么建议呢？
— JamesWilson
像其他答案一样隐藏大纲，直到此解决方案更加标准化为止
— Elijah Mock
从我的<whatever>:focus { outline: none }观点看，如果要考虑可访问性，那么比起这种解决方案，用轮廓隐藏空白框是一个更糟糕的主意。可访问性社区中确实存在一些人，他们希望您永远不要删除大纲，而是让所有内容都具有：focus样式（大纲或框阴影），并且不希望支持：focus-visible，直到浏览器实现允许用户指定用户是否偏好所有项目是否可聚焦。我喜欢认为：“ focus-visible”是介于设计关注点和a11y之间的快乐媒介。
— JamesWilson
5

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

.btn：focus {概述：无；框阴影：无；边框：2px纯透明；}

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

— ns
source
bootstrap 4.0在Windows中使用时仍然有效
— -Windows
5

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

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

HTML看起来像：

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

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

— 斯蒂芬妮·维切（Stephanie Wyche）
source
1
element:focus { box-shadow: none; }删除了蓝色轮廓/阴影。
— user435421
3

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

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

这样可以避免使用click事件时可以看到的闪烁。这确实限制了界面，您将无法使用Tab键切换到按钮，但这在所有应用程序中都不是问题。

— 查尔斯
source
这对我来说成功了一半。我正在使用React和React-Bootstrap。单击后，按钮将保持突出显示状态并带有发光效果。添加e.target.blur（）; 删除光晕，但按钮保持不同的颜色。
— pixelwiz
3

样式

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

使用

<button class="btn btn-primary not-focusable">My Button</button>
— 博格丹·坎特鲁克
source
该解决方案与其他答案有何不同？
— apaul
2
只有一个有一点区别-你可以删除焦点，你需要指定类要素“不能为焦点的”无覆盖的所有按钮，链接等的行为
— 波格丹Kanteruk
3

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

尝试 

button:focus{
outline:0px;
}

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

button:focus{
 outline:none !important;
 }
— 拉娜·阿拉姆吉尔（Rana Aalamgeer）
source
第二个即使使用React Material UI按钮也可以工作
— Geek Guy'Oct
3

对于想要纯CSS方式的人：

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

这也可能适用于链接等，此外，它还能保持键盘的可访问性。最后，不支持：focus-visible的浏览器将忽略它

— 马丁·佩德罗斯
source
4
— Justin Kahn
focus-visible现在有一个官方的polyfill。我对这个问题的回答stackoverflow.com/a/60219624/413538详细说明了如何真正理解所有这些问题。
— JamesWilson
2

我们遇到了类似的问题，并注意到Bootstrap 3 的选项卡（在Chrome中）没有问题。看起来他们使用的是大纲样式，这使浏览器可以决定最好的方法，而Chrome似乎可以完成您想要的工作：除非您单击该元素，否则在聚焦时显示大纲。

对支持的支持outline-style很难确定，因为浏览器可以决定含义。最好签入一些浏览器并有一个后备规则。

— TeknoFiend
source
2

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

— 塞布·伍尔福德（Seb Woolford）
source
使用mouseDown而不是单击。单击时，初始（同时不释放鼠标）轮廓就会出现。
— 文森特·霍克·德雷
2 
.btn:focus:active {
  outline: none;
}

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

— 日元
source
仅在鼠标按下时删除轮廓。鼠标悬停后，将显示轮廓。
— Wellspring
2

这最有效

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

使用按钮触发“转换”事件时，我在MacOS和Chrome上遇到了同样的问题。如果有人阅读此文件，则已经在使用事件侦听器，可以通过.blur()在操作后调用来解决它。

例：

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

尽管如果您还没有使用事件监听器，那么添加一个事件监听器可能会增加不必要的开销，并且像以前的答案一样提供样式解决方案会更好。

— 乔斯帕布鲁斯
source
0

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

此处建议的其他“修复”仅删除焦点轮廓，但仍使按钮可显示。但是，从可用性的角度来看，您已经删除了光晕，因此您的用户将不会以任何方式知道当前聚焦的按钮是什么。

另一方面，将按钮设置为非可选项会带来可访问性。

我正在使用它从中的X按钮删除焦点轮廓bootstrap modal，该按钮的底部有重复的“关闭”按钮，因此我的解决方案对可访问性没有影响。

— 机械的
source
0

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

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

Chrome是一种webkit浏览器，这种效果也发生在Linux上（不仅仅是macOS，尽管某些Chrome样式仅是 macOS）

— 内特·西默
source
0

我在使用<a>按钮时遇到了同样的问题，并且发现通过添加attr 使其至少对我而言正常运行，我错过了一种解决方法type="button"。

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

— spcsLrg
source
该type属性对此button无效，并且是无效值。该属性接受MIME类型，并告诉客户端如果遵循该链接，则应期望获得什么样的数据（例如<a type="application/pdf" ...>，
— Quentin
@Quentin谢谢。是的，我知道这一点。我从开始role="button"但它不起作用（使用<button>代替后<a>）。我的实现特别要求an <a>和not <button>。因此，在进行了很多修改之后，我发现了这种解决方法（很可能是BS错误）！
— spcsLrg
0

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

尝试的例子..

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

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

— 没有人
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.