How do I remove the blue border that appears when clicking on a uib-accordion-heading?

Question

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.

Answer 1

Solution

:focus {outline:0 !important;}

This code all focus border remove.