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

Posted 2021-03-27

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

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/

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

答案

解

:focus {outline:0 !important;}

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

另一答案

我认为你可以这样做，将元素的轮廓设置为无。

.element {
  outline: none;
 }

另一答案

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

*:focus {
    outline: none !important;
}

另一答案

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

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