How do I remove the blue border that appears when

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

I think you can do this setting the outline of the element to none.

.element {
  outline: none;
 }

Answer 2

Everyone who has a problem with not working outline: 0/none - try to set:

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

Answer 3

Chrome is adding the blue line for accessability reason. You can remove it by adding this to your CSS. But note that this is kind of "brute force" to hide all focus outlines that may help users to find the focused element.

*:focus {
    outline: none !important;
}

Answer 4

Solution

:focus {outline:0 !important;}

This code all focus border remove.