在Bootstrap UI Accordion中单击时如何删除轮廓

Question

我正在尝试使用angular-ui bootstrap手风琴来保持标题内的引导表.当用户点击手风琴标题并打开时,会出现一个奇怪的轮廓.它看起来像这样("一些标题"周围的浅蓝色矩形):

我明白这是因为我使用了它<div>,但我怎样才能消除这种行为？

代码是:

<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

大纲被添加到panel-heading panel-title <a> tag有一个.accordion-toggle类的.因此,要避免使用*catch-all选择器,您可以执行以下操作:

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

有了这个解决方案,也不需要!重要(所以你会尊重跟在你后面的开发者).

outline是一个速记属性,其唯一需要的值是outline-style.在这种情况下,我设置outline-style到none.

这篇文章解释了特异性,如果你不相信的话!除了几个案例之外,应该避免重要.

Answer 2

尝试这个

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