css - color - Material angular ng-click resaltado de borde extraño

ng-style conditional

Question

Tengo un problema con el uso de AngularJS y Angular-Material.

Echa un vistazo al siguiente código:

<div flex="100">
   <ul class="list-group">
       <li class="list-group-item cursorPointer" 
        ng-repeat="item in array" ng-click="selectItem(item)">
          {{item.name}}
       </li>
    </ul>
</div>

La etiqueta li tiene una función ng-click adjunta que contiene cierta lógica de negocios. El problema es que aparece un borde extraño al hacer clic en él (similar al resaltado de selección de usuario) y parece que no puedo averiguar de dónde viene.

Esto parece aparecer solo cuando tengo una directiva ng-click en un elemento (el mismo comportamiento en el elemento span)

Versiones utilizadas:

AngularJS - 1.4.1

Material Angular - 0.9.4

Aria Angular - 1.4.0

Angular-animado - 1.4.1

Angular-UI-Boostrap - 0.9.0

Bootstrap - 3.2.0

JQuery - 2.1.4

¿Algunas ideas? Ver este plnkr por ejemplo: http://plnkr.co/edit/60u8Ur?p=preview

Answer 1

Me enfrenté al mismo problema con la mayoría de los elementos.

En mi caso los siguientes códigos CSS funcionaron:

*:focus {
    outline: none !important;
    border: 0 !important;
}

Answer 2

Tu problema es el: enfoque, puedes moverte haciendo algo como esto

 span:focus {
    outline: none;
    border: 0;
 }

Así que esto es solo para su tramo, podría obtener más información específica sobre otros elementos si quisiera eliminarlo en otro lugar.

Answer 3

esto puede ser fácil:

añadir clase nofocus a esos elementos,

y agrega css a esa clase en :focus

.nofocus:focus {
    outline: none;
}