Как удалить контур, появляющийся при нажатии в Bootstrap UI Accordion

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

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

html css angular-ui-bootstrap
person etaiso    schedule 14.05.2015    source источник
comment
Скрипка была бы полезна.   -  person kishan    schedule 14.05.2015
comment
Эта синяя линия - это ваш пользовательский фокус. Это не то, что вы действительно хотите удалить. вы можете нацелить его с помощью: focus   -  person Andrew    schedule 14.05.2015

Ответы (7)


arrow_upward
18
arrow_downward

Схема добавляется к panel-heading panel-title <a> tag, имеющему класс .accordion-toggle. Итак, чтобы избежать универсального селектора *, вы можете сделать это:

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

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

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

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

person lukkea    schedule 14.01.2016

arrow_upward
4
arrow_downward

Попробуйте:

accordion * {outline: 0 !important;}

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

person r1ckr    schedule 27.05.2015

arrow_upward
2
arrow_downward

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

<div class="title-div">

затем на css попробуйте:

.title-div:focus {outline: 0 !important;}
person J. Liu    schedule 25.08.2015

arrow_upward
0
arrow_downward

попробуй это

.accordion-heading:focus{outline:0;border:none;}
person Vicky    schedule 14.05.2015
comment
Это не сработало .. Я обнаружил, что html * {outline: 0 !important;} выполнил работу, но должен быть более элегантный способ. нужно найти для этого точные селекторы CSS. - person etaiso; 14.05.2015
comment
Это то, что я сказал, но я не думаю, что это плохая практика, поскольку она отменяет все классы - person etaiso; 14.05.2015

arrow_upward
0
arrow_downward

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

.ng-scope .accordion-toggle  { outline: 0 !important;}
person Behzad SB    schedule 17.10.2016

arrow_upward
0
arrow_downward

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

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

    text-decoration: none;
    outline-style: none;
}
person anudeep b    schedule 20.06.2017
comment
Не могли бы вы объяснить свой пример? - person mhatch; 20.06.2017

arrow_upward
0
arrow_downward

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

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

person Arif Rahman    schedule 03.07.2017