Как удалить контур, появившийся при щелчке в пользовательском интерфейсе Bootstrap UI Accordion

Я пытаюсь использовать angular -ui бутстрап-аккордеон для хранения таблицы начальной загрузки внутри заголовка. Когда пользователь нажимает на заголовок аккордеона, и он открывается, появляется странная схема. Это выглядит так (голубой прямоугольник вокруг "Some title" ): enter image description here

Я понимаю, что это происходит потому, что я использовал <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>

Ответы

Ответ 1

Контур добавляется к panel-heading panel-title <a> tag, который имеет класс .accordion-toggle. Поэтому, чтобы избежать селектора * catch-all, вы можете сделать это:

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

С этим решением нет необходимости! важно либо (чтобы вы уважали разработчиков, которые приходят после вас).

outline - это сокращенное свойство, единственным требуемым значением которого является outline-style. В этом случае я устанавливаю outline-style в none.

Это отличная статья, которая объясняет специфику, если вы не уверены, что важно избегать во всех случаях, кроме нескольких случаев.

Ответ 2

Попробуйте:

accordion * {outline: 0 !important;}

Изменение etaiso комментарий

Ответ 3

попробуйте добавить класс внутри div раздела:

<div class="title-div">

затем в css, попробуйте с помощью:

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

Ответ 4

попробуйте это

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

Ответ 5

Попробуйте, чтобы это сработало для меня

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

Ответ 6

попробуйте следующее:

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

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

Ответ 7

100% работа будет:

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