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

Question

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

Remove blue border from css custom-styled button in Chrome

How to remove the blue box shadow border in button if clicked

How to remove border (outline) around text/input boxes? (Chrome)

How to remove the border highlight on an input text element

Remove blue "selected" outline on buttons

Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly?

bootstrap button shows blue outline when clicked

How to get rid of blue outer border when clicking on a form input field?

在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

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

*:focus {
    outline: none !important;
}

Answer 3

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

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

Answer 4

这应该有效：

    .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;
       }
    }

  

Answer 5

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

单击右上角的使屏幕变大的框时，我摆脱了该行。