从 Chrome 中的 css 自定义样式按钮中删除蓝色边框

Posted 2023-03-03

技术标签:

【中文标题】从 Chrome 中的 css 自定义样式按钮中删除蓝色边框【英文标题】：Remove blue border from css custom-styled button in Chrome 【发布时间】：2013-12-18 20:38:32 【问题描述】：

我正在处理一个网页，我想要自定义样式的<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;

【问题讨论】：

我觉得还可以吗？ jsbin.com/oSAdovun/1/edit 我不知道为什么它在你的演示中起作用。它在这里做：jsfiddle.net/NgL8H@davidpauljunior 我在底部添加了你说不起作用的焦点规则，但它似乎确实：jsfiddle.net/NgL8H/1 您不应该完全删除轮廓 - 残障人士 - 以及像我这样因为速度快而经常使用键盘的人 - 需要它来导航。将大纲重新设置为您喜欢的样式会更好。请不要像这样设置outline: none，除非您准备好替换可访问性的损失。见这个网站：outlinenone.com 【参考方案1】：

不推荐这样做，因为它会使您网站的accessibility 回归；有关详细信息，请参阅此post。

也就是说，如果你坚持，这个 CSS 应该可以工作：

button:focus outline:0;

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

或者在这个sn-p中：

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>

【讨论】：

这不应该是outline: none;还是没关系？ @henrywright 好吧，OP 试过了，但对他没有用。请不要这样做。您的轻微不满与这成为的大规模可访问性问题无关你绝对应该重新设计它而不是完全隐藏它。在这种情况下，请尝试button:focus outline-color: #A75000 之类的方法……而不是隐藏指示器，而是将其更改为适合样式的深橙色。 @SeanO'Brien 承认 OP 的给定情况可能是一个有 5 个用户的网站，所有用户都身体健康。但可能在 1123 名投票的人中，大多数人认为这是针对他们特定情况做事的正确方法，但实际上这并不是歧视性的。【参考方案2】：

等等！这种丑陋的轮廓是有原因的！

在移除那个难看的蓝色轮廓之前，您可能需要考虑可访问性。默认情况下，该蓝色轮廓放置在可聚焦元素上。这样一来，有可访问性问题的用户就可以通过点击该按钮来关注该按钮。一些用户不具备使用鼠标的运动技能，只能使用键盘（或其他一些输入设备）进行计算机交互。当您移除蓝色轮廓时，不再有关于聚焦哪个元素的视觉指示器。如果您要移除蓝色轮廓，您应该将其替换为按钮已获得焦点的另一种视觉指示。

可能的解决方案：聚焦时使按钮变暗

对于下面的示例，Chrome 的蓝色轮廓首先使用 button:focus outline:0 !important; 删除

以下是正常显示的基本 Bootstrap 按钮：

以下是获得焦点时的按钮：

按下时的按钮如下：

如您所见，按钮在获得焦点时会变暗一些。就个人而言，我建议将焦点按钮设置得更暗，这样按钮的焦点状态和正常状态之间就会有非常明显的差异。

不仅适用于残疾用户

让您的网站更易于访问是经常被忽视的事情，但它有助于在您的网站上创造更高效的体验。有许多普通用户使用键盘命令来浏览网站以便将手放在键盘上。

【讨论】：

问题出在 Chrome 中，即使在点击时也会发生，而不仅仅是 Tab 键（大多数浏览器中的逻辑实现）。所以实际上谷歌正在减少可访问性，因为大多数开发人员只会将其关闭（在 Chrome 中）更多时间浪费在研究/修复与谷歌/Chrome 相关的问题（密码保存、电子邮件 css 支持等）你说得对！要在删除大纲时考虑到可访问性，您需要一点 javascript：paciellogroup.com/blog/2012/04/… 你甚至不能像你可以回答的那样对评论进行样式/格式设置。很难仅通过评论提供这种详细程度的反馈。 @RunLoop 点击后如何去除或更改蓝色边框？可以通过 CSS 完成还是需要 Javascript？有这些问题的人可以简单地使用 vimium-ff【参考方案3】：

我只是从页面中的所有标签中删除大纲，方法是选择全部并将大纲应用于所有内容：)

*:focus outline:none

正如 bagofcole 提到的，您可能还需要添加 !important，因此样式将如下所示：

*:focus outline:none !important

【讨论】：

请不要这样做。使用键盘浏览页面的用户将无法看到当前聚焦的元素。如果单击事件来自鼠标，则不要隐藏轮廓，而是模糊元素。不推荐那样【参考方案4】：

在我遇到此问题时，我必须指定 box-shadow: none

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

【讨论】：

感谢您的帖子！ “box-shadow”属性是我的重点。这对我来说是同样的问题。并不是说它是相关的，但我在 Ubuntu 17.10 上的 Chrome 中使用了 Roots 的 Sage 主题。我必须添加 !important 才能让它工作，可能引导程序在某处对此有特定的定义这对我有用，伙计！感谢您发布解决方案。干杯是的，例如，它是引导程序中的 box-shadow【参考方案5】：

不要忘记!important 声明，以获得更好的结果

button:focus outline:0 !important;

无论该规则出现在 CSS 文档中的什么位置，都将始终应用具有 !important 属性的规则。

【讨论】：

“为了更好的结果”？你能解释一下 !important 的作用吗？但是你能解释一下它的作用吗？ “它存在的原因”并没有向不知道它的原因的人解释它的原因是什么。 !important 应该很少使用，并且只是为了确保某些内容不应该被后续规则覆盖。覆盖以前的规则时，您应该使用正确的选择器来定位您的元素。 !important 的使用很少是合理的。您应该始终以更有意义的方式确定您的 css 选择器的范围，而不是仅仅因为它为您提供“更好的结果”而使用 !important。请不要这样做。虽然从技术上讲这回答了 OP 的问题，但使用 outline:0 !important 对焦点位置的每个指示进行核对是糟糕的用户体验和糟糕的开发实践。如果您这样做，请确保您正在做其他事情来指示焦点位置（例如更改元素的背景颜色）。【参考方案6】：

删除outline 对可访问性来说太糟糕了！理想情况下，仅当用户打算使用键盘时才会显示对焦环。

使用:focus-visible。它目前是一个 W3C 提案，用于使用 CSS 设置纯键盘焦点样式，并在 Firefox (caniuse) 中得到支持。在其他主流浏览器支持之前，您可以使用这个强大的polyfill。

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


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

我还写了一个more detailed post 以防您需要更多信息。

【讨论】：

请注意，AFAIK 它不需要是 outline 这样，只要 :focus 状态通过其他方式清晰可见，例如 border, background-color, @ 987654331@等最佳答案！你的帖子值得一读（我现在正在查看你博客的其余部分?）焦点可见的 npm 包现在确实是它所在的位置。这绝对是最好的解决方案。只需几行代码，我就摆脱了点击时烦人的蓝色边框，同时保持键盘使用。谢谢！这个数据正确吗？这个选择器似乎在 Chrome 中支持，而不是 Firefox。 developer.mozilla.org/en-US/docs/Web/CSS/… 似乎在 Firefox 中，选择器被称为:-moz-focusring，但与文档所说的相反，它并没有区分单击和选项卡焦点。在 Chrome 中，到目前为止，您需要启用特定标志才能使其工作【参考方案7】：

将此添加到您的 CSS 文件中。

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

【讨论】：

谢谢。有效，但 MDN 说：此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且未来的行为可能会发生变化。【参考方案8】：

Chrome 和其他浏览器的修复

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

【讨论】：

【参考方案9】：

使用这个：

:active 
    outline:none;

或者如果这不起作用：

:active 
   outline:none !important;

这对我有用（至少 FF 和 Chrome）。与其定位:focus 状态，不如定位:active 状态，当用户单击链接时，这将消除浏览器中美观的突出显示。但是当有残疾的用户在页面中使用选项卡或切换选项卡时，它仍然会保留焦点状态。双方都很高兴。 :)

【讨论】：

如果您只想用相同的代码替换我的缩小版本但扩展了，为什么还要编辑我的答案？对于用户来说，这并没有更好地澄清它。您是否因此获得答案积分？大声笑... 这样的 StackExchange 网站的意义在于提供有助于阅读它们的任何人理解的答案。为此，使用简洁、缩小代码的答案不如可读格式的代码有用。通过使答案更具可读性来改进答案是为每个人改进网站的正常方法。【参考方案10】：

针对这个问题：

使用这个：

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

结果：

【讨论】：

【参考方案11】：

如果您使用的是 Bootstrap 4.1 和可能的其他版本，则大多数解决方案都将不起作用。经过多次头部撞击，我发现您需要应用 shadow-none 类：

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

【讨论】：

【参考方案12】：

对于使用 Bootstrap 并遇到此问题的任何人，他们使用 :active:focus 以及仅使用 :active 和 :focus 所以你需要：

element:active:focus 
    outline: 0;

希望节省一些时间来解决这个问题，我不禁想知道为什么这么简单的事情行不通。

【讨论】：

【参考方案13】：

我在使用引导程序时遇到了同样的问题。我用轮廓和盒子阴影解决了

.btn:focus, .btn.focus 
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none

【讨论】：

【参考方案14】：

这对我有用：

button:focus 
    box-shadow:none;

【讨论】：

【参考方案15】：

对所有有蓝色边框问题的元素尝试此代码

*
outline: none;

或

*
outline-style: none;

【讨论】：

【参考方案16】：

直到所有现代浏览器都开始支持 css-selector :focus-visible,保存可访问性的最简单且可能是最好的方法是删除这个棘手的焦点仅适用于鼠标用户，并将其保存为键盘用户：： p>

1.使用这个微小的 polyfill（大约 10kb）：https://github.com/WICG/focus-visible 2.在你的css中添加下一个代码：

.js-focus-visible :focus:not(.focus-visible) 
  outline: none;

css4-selector 的浏览器支持：focus-visible 目前非常弱：https://caniuse.com/#search=focus-visible

【讨论】：

【参考方案17】：

另一种解决可访问性问题的方法是通过一点点Javascript。致谢来自hackernoon 的这篇富有洞察力的博文：https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

这里的方法非常简单而有效：添加一个类当人们开始使用 tab 键来导航页面时（并且可以在再次切换到鼠标时将其删除。然后你可以使用此类是否显示焦点轮廓。

function handleFirstTab(e) 
    if (e.keyCode === 9)  // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    


window.addEventListener('keydown', handleFirstTab);

【讨论】：

【参考方案18】：

我遇到了同样的问题，所以我使用了简单的 CSS-

.custom-button 
    outline: none

【讨论】：

【参考方案19】：

如果你想在输入中删除相同的效果，你可以添加以下代码以及按钮。

input:focus outline:0;

【讨论】：

【参考方案20】：

只需写outline:none;。无需使用伪元素focus

【讨论】：

【参考方案21】：

好的，即使冒着永远不会让任何人看到的风险，因为已经有很多答案我想在 2020 年提供更多的 js 解决方案：

outline.js 或 outliner.js 这两个库正好解决了我们在这里遇到的问题：删除鼠标的轮廓，但保留键盘功能或可访问性。

所以不要决定哪个更重要的样式或可访问性，而是选择两者！

【讨论】：

【参考方案22】：

这是 Chrome 家族中的一个问题，并且一直存在。

提出了一个错误https://bugs.chromium.org/p/chromium/issues/detail?id=904208

它可以在这里显示：https://codepen.io/anon/pen/Jedvwj 只要你为任何类似按钮的东西添加边框（例如，role="button" 已添加到标签中）Chrome 会在你搞砸并设置焦点状态时用鼠标点击。

我强烈建议使用此修复程序：https://github.com/wicg/focus-visible。

只需执行以下操作

npm install --save focus-visible

将脚本添加到您的 html：

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

如果使用 webpack 或类似的东西，或者导入到你的主入口文件中：

import 'focus-visible/dist/focus-visible.min';

然后将其放入您的 css 文件中：

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) 
  outline: none;


// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible 
  outline: magenta auto 5px;

您可以设置：

button:focus outline:0;

但是，如果您拥有大量用户，那么您将不利于那些不能使用鼠标或只想使用键盘来提高速度的人。

【讨论】：

以上是关于从 Chrome 中的 css 自定义样式按钮中删除蓝色边框的主要内容，如果未能解决你的问题，请参考以下文章

css 简洁的新标签页（Google Chrome Extention）自定义样式

如何让firefox和chrome支持css自定义鼠标样式？IE中用“cursor:url()”属性可以实现，FF、Chrome怎么弄？

我们可以用angular中的自定义css覆盖选择器的默认样式吗

在 chrome 中打印预览后管理图像的 css 样式

uploadify 自定义按钮样式

CSS自定义文件上传按钮样式，兼容主流浏览器