html - data - collapse jquery

Cómo eliminar el contorno apareció al hacer clic en Bootstrap UI Accordion

Question

Estoy tratando de usar el acordeón bootstrap angular-ui para mantener la tabla de bootstrap dentro del encabezado. Cuando el usuario hace clic en el encabezado del acordeón y se abre, aparece un contorno extraño. Se ve así (el rectángulo azul claro alrededor de "Some title"):

Entiendo que sucede porque usé <div> , pero ¿cómo puedo eliminar este comportamiento?

El código es:

<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

El esquema se agrega a la panel-heading panel-title <a> tag del panel-heading panel-title <a> tag , que tiene una clase .accordion-toggle . Entonces, para evitar el selector * catch-all puedes hacer esto:

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

Con esta solución tampoco es necesario! Importante ( por lo que respetará a los desarrolladores que vienen después de usted ).

outline es una propiedad abreviada cuyo único valor requerido es outline-style . En este caso, estoy configurando outline-style en none .

Este es un gran artículo que explica la especificidad, si no está convencido de que debe evitarse, importante en todos menos en un par de casos.

Answer 2

El trabajo 100% será:

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

Answer 3

Intenta con:

accordion * {outline: 0 !important;}

Modificando el comentario de etaiso

Answer 4

intente agregar una clase dentro del título div como:

<div class="title-div">

luego en css, intente con:

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

Answer 5

prueba esto

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

Answer 6

prueba esto:

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

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

Answer 7

Prueba esto funciono para mi

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