在Chrome中去除CSS自定义按钮的蓝色边框

Question

我正在制作一个网页，希望自定义样式 <button> 标签。因此，我使用 CSS 设置了 border: none。在 Safari 中它非常完美，但是在 Chrome 中，当我点击其中一个按钮时，它会出现一个令人烦恼的蓝色边框。我认为应该用button:active { outline: none } 或者 button:focus { outline:none } 来解决，但是都不起作用。有什么建议吗？

这是被点击前的样子（以及我希望它在点击后仍然保持的样子）： 这就是我所说的边框： 这是我的 CSS：

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

- eshellborn

---

不应完全删除大纲，因为那些残障人士和像我一样经常使用键盘的人需要它来进行导航。最好重新设计大纲样式以适应您的喜好。 - Chris B

保持按钮:focus边框样式，否则键盘用户将无法知道该按钮已被选中。 - R1CHY_RICH

我找到了这篇总结得非常好的文章：https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2 - Offirmo

不幸的是，在Chrome中存在一个问题，即蓝色轮廓线在单击时显示并保持可见。其他浏览器默认情况下只在键盘标签上显示它。这个答案有一个解决方法，所以你只会在使用键盘时看到它：https://dev59.com/vWIj5IYBdhLWcg3wWkCd#50570972 不要听任何人说要将其关闭。他们正在伤害那些不能使用鼠标的用户（squeeek） - alexrogers

除非您准备好承担可访问性损失，否则请不要像这样设置outline:none。请参考此网站：http://outlinenone.com/ - Flimm

尝试使用 button:focus-visible{outline:none}。希望能对您有所帮助。 - Aslam khan

Answer 1

这样做不被推荐，因为它会降低你的网站无障碍性；有关更多信息，请参见此文章。

尽管如此，如果您坚持，这个 CSS 应该可以正常工作：

button:focus {outline:0;}

请查看JSFiddle：http://jsfiddle.net/u4pXu/

或者可以在这个片段中查看：

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

- Ronen Cypis

---

这实际上应该是 outline: none; 吗？还是无所谓？ - henrywright

@henrywright 嗯，原帖作者尝试过那个方法但没有成功。 - Diosney

请不要这样做。您的小不满无关紧要，与此造成的重大可访问性问题毫无关联。 - phazei

你应该重新设计这个元素而不是完全隐藏它。在这种情况下，你可以尝试使用 button:focus{ outline-color: #A75000 } 这样的代码，将指示器的颜色改为符合风格的深橙色，而不是让它消失不见。 - cloudworks

尽管 @SeanO'Brien 可能认为 OP 所描述的情况是一个只有五个身体健康用户的网站，但实际上，支持此观点的 1123 人中大多数可能认为这是适用于他们所处情况的正确方式，但事实上这是一种歧视行为。 - alexrogers

Answer 2

等等！那个丑陋的轮廓有其存在的原因！

在移除那个丑陋的蓝色轮廓之前，您可能需要考虑 可访问性。默认情况下，该蓝色轮廓会放置在可获取焦点的元素上。这是为了使具有可访问性问题的用户能够通过使用 Tab 键将焦点放在按钮上。一些用户没有使用鼠标的运动技能，必须仅使用键盘（或其他输入设备）进行计算机交互。当您删除蓝色轮廓时，不再有视觉指示哪个元素受到关注。如果您要删除蓝色轮廓，则 应 用其他类型的视觉指示替换它，以表明该按钮处于关注状态。

可能的解决方案：在焦点时加深按钮颜色

下面的示例首先使用 button:focus { outline:0 !important; } 删除了 Chrome 的蓝色轮廓。

以下是基本的 Bootstrap 按钮在正常状态下的外观：

以下是这些按钮在获得焦点时的外观：

以下是这些按钮被按下时的外观：

正如您所看到的，当这些按钮获得焦点时，它们会变暗一些。个人建议使关注状态的按钮更加暗淡，以便在按钮的正常状态和关注状态之间有非常明显的区别。

不仅适用于残障用户

提高网站可访问性是经常被忽视的事情，但可以帮助在您的网站中创造更高效的体验。有许多普通用户使用键盘命令来浏览网站，以使双手保持在键盘上。

- Nathan

---

问题在于Chrome中，即使是点击也会发生这种问题，而不仅仅是像大多数浏览器中那样使用“Tab”键。因此，实际上，Google正在降低可访问性，因为大多数开发人员将简单地关闭（在Chrome中）该功能。这会导致更多的时间浪费在研究/修复与Google / Chrome相关的问题（例如密码保存、电子邮件CSS支持以及这个问题）。 - RunLoop

没错！在移除轮廓线时考虑无障碍性，需要一些 JavaScript：https://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/ - mems

你甚至无法像回答那样格式化注释。仅通过注释提供这种详细级别的反馈很困难。 - A-Dubb

@RunLoop 你如何在点击后删除或更改蓝色边框？可以通过CSS完成还是需要JavaScript？ - Nick

有这些问题的人可以简单地使用vimium-ff。 - yukashima huksay

Answer 3

在我的这个问题实例中，我不得不指定 box-shadow: none

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

- antonkronaj

---

谢谢您的文章！在我的情况中，“box-shadow”属性是关键点。 - Nightking

这对我来说也是同样的问题。虽然这并不相关，但我在Ubuntu 17.10上使用Chrome中的Roots' Sage主题。 - Spencer Hill

我必须添加 !important 才能使其正常工作，可能是因为 Bootstrap 在某个地方有一个特定的定义。 - webMan

是的，例如在Bootstrap中使用box-shadow。 - mercury

Answer 4

我只是通过选择所有内容并将outline:none应用于所有标签，从页面中删除了所有标签的轮廓 :)

*:focus {outline:none}

正如bagofcole所提到的，你可能还需要添加!important，以便样式看起来像这样：

As bagofcole mentioned, you might need to add !important as well, so the style will look like this:

*:focus {outline:none !important}

- Mike

---

请勿这样做。使用键盘导航的用户将无法看到当前焦点元素。不要隐藏轮廓线，而是在点击事件来自鼠标时使元素模糊。 - joepio

不建议那样做。 - Tiago Rangel de Sousa

这并不被推荐，因为只能用键盘的用户无法使用鼠标，并需要通过按 tab 或其他方式查看当前聚焦的元素... - Noah

Answer 5

别忘了使用!important声明，以获得更好的效果。

button:focus {outline:0 !important;}

拥有!important属性的规则将始终被应用，无论该规则在CSS文档中出现的位置如何。

- Scabbia

---

"为了获得更好的结果"？你能解释一下!important是什么意思吗？ - Popnoodles

但你能解释一下它是做什么的吗？"存在的理由"并不能向不知道其原因的人解释其原因。 - Popnoodles

!important 应该很少使用，仅用于确保某些内容不被后面的规则覆盖。在覆盖先前的规则时，应使用正确的选择器来定位元素。 - Popnoodles

滥用 !important 是不可取的。您应该总是以更有意义的方式对 CSS 选择器进行作用域限定，而不是只因它可以为您带来“更好的结果”而使用 !important。 - Ronen Cypis

请不要这样做。虽然从技术上讲这回答了提问者的问题，但是使用outline:0 !important来消除聚焦位置指示是不好的用户体验和开发实践。如果您正在这样做，请确保您做了其他事情来指示聚焦位置（例如更改元素的背景颜色）。 - cloudworks

Answer 6

移除outline对于可访问性来说是非常糟糕的！理想情况下，焦点环只在用户打算使用键盘时出现。

使用:focus-visible。它在所有主流浏览器中都得到了支持（caniuse）。

/* Remove outline for non-keyboard :focus */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Optional: Customize :focus-visible */
:focus-visible {
  outline-color: lightgreen;
}

- Aaron Noel De Leon

---

请注意，据我所知，它不需要像“outline”一样，只要通过其他方式清晰地显示:focus状态，例如border,background-color,box-shadow等。 - Már Örlygsson

最佳答案！你的帖子值得一读（我现在也在看你博客上的其他内容）。 目前，重点关注focus-visible npm包。 - Félix Paradis

这绝对是最好的解决方案。只需几行代码，我就摆脱了那个烦人的点击蓝色边框，同时在键盘使用时保留它。谢谢！ - pesta

这些数据正确吗？这个选择器似乎在Chrome中受支持，但在Firefox中不受支持。https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#Browser_compatibility - Kevin Suttle

难道不应该是:not(:focus-visible)吗？.focus-visible表示一个类而不是伪类。 - ariebear

Answer 7

请将以下内容添加到你的CSS文件中。

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

- Joe

---

谢谢。虽然能用，但是MDN说：这个功能不符合标准，也没有被列入标准的轨迹。请勿在面向Web的生产网站上使用它：它可能不适用于所有用户。不同实现之间可能也存在很大的不兼容性，并且行为可能会在未来发生变化。 - Behnam

Answer 8

Chrome和其他浏览器的修复方法

button:focus { outline: none !important; box-shadow: none !important; }

- chronomer

Answer 9

针对这个问题：

可以使用以下方法：

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

结果:

（注：此内容为一张图片，无法进行翻译）

- Behnam

---

谢谢，这对我的网站非常有效。 - Supertecnoboff

Answer 10

请使用以下方式：

:active {
    outline:none;
}

如果那个不起作用，可以尝试这个：

:active {
   outline:none !important;
}

这对我来说可行（至少在FF和Chrome上）。不要针对:focus状态，而是针对:active状态，这将消除当用户单击链接时浏览器中引人注目的高亮显示。但当残障用户通过页面进行制表或Shift-Tab时，它仍将保留焦点状态。双方都很满意。 :)

- chuk

---

如果你只是用同样的代码但是扩展了代码来代替我的精简版本，那为什么要编辑我的回答呢？这并没有让用户更清楚地理解。你这样做是为了获得回答的功劳吗？哈哈... - chuk

像StackExchange这样的网站的目的是提供帮助任何阅读它们的人理解问题的答案。为此，相较于简洁、压缩的代码，易读格式的代码更有帮助。通过提高答案的可读性来改进网站是对大家都有益的常规方式。 - bignose