如何删除单击uib手风琴标题时出现的蓝色边框? [英] How do I remove the blue border that appears when clicking on a uib-accordion-heading?

问题描述

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

I've tried the solutions presented in the following questions to no avail:

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

如何去除蓝色按钮中的框阴影边框(如果单击)

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

如何删除输入文字元素

移除蓝色的"selected"按钮，按钮上的轮廓

无论如何都可以防止快速单击时，Chrome中的元素会以蓝色突出显示吗?

引导按钮在单击时显示蓝色轮廓

单击表单输入字段时如何摆脱蓝色的外边界?

在HTML中，我有以下内容:

In HTML I have the following:

<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，它也不会改变.

The blue outline doesn't appear around the entire accordion header, but form fits around the text. I've tried inline styling, selection by ID and class, but even with !important it doesn't change.

在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，但没有任何改变.

I've also tried swapping outline: none for outline: 0 but it didn't change anything.

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

Link to my CSS file: https://jsfiddle.net/8wnd2nz5/

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

EDIT -- Attached an image to illustrate what I'm referring to.

推荐答案

解决方案

:focus {outline:0 !important;}

此代码将所有焦点边框删除.

This code all focus border remove.

这篇关于如何删除单击uib手风琴标题时出现的蓝色边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！