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"): enter image description here

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>

That blue line is your user focus. Its not something that you really want to remove. you can target it with :focus — Andrew, May 14 '15 at 12:17

lukkea · Answer 1 · 2016-02-11T08:32:36.397

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.

score 4 · Answer 2 · edited May 23 '17 at 11:46

4

Try with:

accordion * {outline: 0 !important;}

Modifying etaiso comment

edited May 23 '17 at 11:46

Community

1
1

answered May 27 '15 at 17:44

r1ckr

5,643
5
20
24

score 2 · Answer 3 · answered Aug 25 '15 at 08:56

2

try to add a class inside the title div like:

<div class="title-div">

then on css, try with:

.title-div:focus {outline: 0 !important;}

answered Aug 25 '15 at 08:56

J. Liu

21
1

score 0 · Answer 4 · answered May 14 '15 at 12:17

0

try this

.accordion-heading:focus{outline:0;border:none;}

answered May 14 '15 at 12:17

Vicky

358
2
15

1

It didnt work.. I found that `html * {outline: 0 !important;}` did the work, but there must be more elegant way. need to find the exact css selectors for this. – etaiso May 14 '15 at 12:40
That's what I said, but I don't think it's a bad practice as it overrides all classes – etaiso May 14 '15 at 12:46

score 0 · Answer 5 · answered Oct 17 '16 at 06:21

0

Try this it worked for me

.ng-scope .accordion-toggle  { outline: 0 !important;}

answered Oct 17 '16 at 06:21

Behzad SB

1

score 0 · Answer 6 · answered Jun 20 '17 at 14:08

0

try this:

.accordion-toggle:hover, .accordion-toggle:focus, .accordion-toggle:active{

    text-decoration: none;
    outline-style: none;
}

answered Jun 20 '17 at 14:08

anudeep b

391
2
6

2

Can you provide some explanation for your example? – mhatch Jun 20 '17 at 14:27

score 0 · Answer 7 · answered Jul 03 '17 at 06:03

0

100% work will be :

a:focus, a:hover {
  color: #23527c;
  text-decoration: none;
}

answered Jul 03 '17 at 06:03

Arif Rahman

9
4

How to remove outline appeared on click in Bootstrap UI Accordion

7 Answers7

Linked