How to remove outline appeared on click in Bootstrap UI Accordion

Question

I'm trying to use angular-ui bootstrap accordion to hold bootstrap table inside the heading. When user clicks on the accordion heading and it opens, a strange outline appears. It looks like this (the light blue rectangle around "Some title"):

I understand it happens because I used the <div> , but how can I eliminate this behavior?

The code is:

<accordion close-others="true">
  <accordion-group>
    <accordion-heading>
      <div>Some title</div>
    </accordion-heading>
    Text
  </accordion-group>
  <accordion-group>
    <accordion-heading>
      <div>Another title</div>
    </accordion-heading>
  </accordion-group>
</accordion>

Answer 1

The outline is added to the panel-heading panel-title <a> tag, which has an .accordion-toggle class. So, to avoid the * catch-all selector you can do this:

.accordion-toggle:focus{outline: none;}

With this solution there is no need for !important either (so you'll respect the devs who come after you).

---

outline is a shorthand property whose only required value is outline-style. In this case I am setting outline-style to none.

---

This is a great article that explains specificity, if you're not convinced that !important should be avoided in all but a couple of cases.