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

问题描述

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

解决方案

解决方案

:focus {outline:0 !important;}

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

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

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?

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>

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.

In CSS I have:

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

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

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

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

解决方案

Solution

:focus {outline:0 !important;}

This code all focus border remove.

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