当单击uib-accordion-heading时出现蓝色边框，如何去除？

Question

我尝试了以下问题中提出的解决方案，但都无济于事：

如何在Chrome中移除自定义样式按钮的蓝色边框

如何在按钮被点击时移除蓝色盒状阴影边框

如何在Chrome中移除文本/输入框周围的边框（轮廓线）

如何移除输入文本元素的边框高亮显示效果

如何移除按钮的蓝色“选中”轮廓线

如何在快速点击时防止Chrome中元素显示蓝色高亮

点击Bootstrap按钮时显示蓝色轮廓线

如何在单击表单输入字段时去除蓝色外部边框

在HTML中，我有以下内容：

<uib-accordion-heading>
    <div id="fart1" ng-if="!contactsAccordionIsOpen" class="noSelect" style="outline: none;">Contacts<span class="glyphicon glyphicon-plus-sign pull-right"></span></div>
    <div id="fart2" ng-if="contactsAccordionIsOpen" class="noSelect" style="outline: none;">Contacts<span class="glyphicon glyphicon-minus-sign pull-right"></span></div>
</uib-accordion-heading>

蓝色轮廓线不会出现在整个手风琴标题周围，但会根据文本形成适应性。我尝试过内联样式，按ID和类进行选择，但即使使用 !important，也没有改变。

CSS中我有：

#fart1:focus {
    border: none !important;
    outline: none !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#fart2:focus {
    border: none !important;
    outline: none !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.noSelect {
    border: none !important;
    outline: none !important;
    outline-width: 0 !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

我还尝试使用outline: 0替换outline: none，但仍然没有改变任何东西。

我的CSS文件链接：https://jsfiddle.net/8wnd2nz5/

编辑--附上一张图片说明我的问题。

- Legion

---

尝试这个：:focus {outline: 0;}。 - cnsvnc

@cnsvnc 在Chrome中，它是像图像中的蓝色边框一样。在Internet Explorer 8中，它是文本下面的下划线。 - Legion

@Legion 试试这样写：:focus{outline:0 !important;} - cnsvnc

@cnsvnc :focus {outline:0 !important;} 有效了！把它作为答案，我会接受它。很奇怪，在noSelect类中放置outline: 0 !important;没有起作用。 - Legion

@Legion 边框是一个关键的可访问性功能（对于键盘导航非常重要）。如果您删除它，必须用另一种视觉提示来替换它。 - Josef Engelfrost

Answer 1

解决方案

:focus {outline:0 !important;}

这段代码的功能是移除所有聚焦边框。

- cnsvnc

Answer 2

对于所有遇到 未工作的轮廓: 0 / none 问题的人，请尝试设置：

:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}

- Сергій Хащевий

---

这应该是最佳答案。谢谢。这个问题极大地触发了我的强迫症。 - danmc

这应该是最佳答案。最佳答案没有解决问题，但这个解决了。 - Bill Gardner

最佳答案。 - foo-baar

Answer 3

Chrome为了提高可访问性而添加了蓝色边框线。您可以通过将以下代码添加到CSS中来删除它。但请注意，这种方法会隐藏所有焦点轮廓，这可能会帮助用户找到已聚焦的元素。

```css *:focus { outline: none; } ```

*:focus {
    outline: none !important;
}

- Christian Moser

Answer 4

我认为您可以通过将元素的轮廓设置为无来完成此设置。

.element {
  outline: none;
 }

- Petya Naumova

Answer 5

这应该可以工作：

    .ui-accordion {
       border: none;
       outline: none;
       /*Removes all outlines*/
       :focus {
         outline: 0 !important;
         box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
       }
    }

  

- user13888056

Answer 6

当我关闭 Word 文档的时间太长时，底部出现了蓝色线。

当我点击右上角的放大屏幕框时，我摆脱了那条线。

- Paula

---

你好 Paula，谢谢你的回答。不过你应该仔细阅读问题，你的回答离题了。 - Mustafa Yousef