如何在删除uib-accordion标题时删除出现的蓝色边框？

Question

我尝试过以下问题中提出的解决方案无济于事:

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

如果单击按钮,如何删除按钮中的蓝色框阴影边框

如何删除文本/输入框周围的边框(轮廓)？(铬)

如何删除输入文本元素上的边框突出显示

删除按钮上的蓝色"选定"轮廓

无论如何,要在快速点击时阻止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: none,outline: 0但它没有改变任何东西.

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

编辑 - 附上一张图片来说明我所说的内容.

Answer 1

解

:focus {outline:0 !important;}

此代码全部重点边框删除.

Answer 2

每个有问题的人not working outline: 0/none- 尝试设置：

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

Answer 3

出于可访问性的原因，Chrome 添加了蓝线。您可以通过将其添加到 CSS 来删除它。但请注意，这是隐藏所有焦点轮廓的“蛮力”，可以帮助用户找到焦点元素。

*:focus {
    outline: none !important;
}