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

Posted 2023-02-22

【中文标题】如何删除单击 uib-accordion-heading 时出现的蓝色边框？

【英文标题】：How do I remove the blue border that appears when clicking on a 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 类中不起作用，这很奇怪。

【参考方案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，感谢您的回答。你应该阅读这个问题。你的回答没有抓住重点。