如何删除单击 uib-accordion-heading 时出现的蓝色边框？答案

【问题标题】：How do I remove the blue border that appears when clicking on a uib-accordion-heading?如何删除单击 uib-accordion-heading 时出现的蓝色边框？
【发布时间】：2017-07-14 09:13:20
【问题描述】：

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

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/

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

【问题讨论】：

我认为我们需要一个活生生的例子，因为你坚持没有任何工作。
我无法理解您所描述的边框类型。你能提供一张图片吗？根据您提到的文本单个字符的影响进行猜测，这可能是由text-shadow 或box-shadow 引起的。
只需:focus {outline: 0;} 试试这个。
@Legion 试试这样:focus {outline:0 !important;}
@cnsvnc :focus {outline:0 !important;} 成功了！让它成为一个答案，我会接受它。将outline: 0 !important; 放在我的noSelect 类中不起作用，这很奇怪。

标签： css twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

解决方案

:focus {outline:0 !important;}

此代码将所有焦点边框移除。

【讨论】：

【解决方案2】：

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

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

【讨论】：

这应该是最佳答案。谢谢。这个问题严重触发了我的强迫症。
这应该是最佳答案。最佳答案没有解决问题，但这个解决了。

【解决方案3】：

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

*:focus {
    outline: none !important;
}

【讨论】：

【解决方案4】：

我认为您可以将元素的轮廓设置为无。

.element {
  outline: none;
 }

【讨论】：

【解决方案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;
       }
    }

【讨论】：

【解决方案6】：

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

当我单击右上角的使屏幕变大的框时，我去掉了那条线。

【讨论】：

您好 Paula，感谢您的回答。你应该阅读这个问题。你的回答没有抓住重点。