How to avoid primeng button from getting selected when clicked?-CodePudding

I am working with normal buttons from primeng, those buttons get "selected" when clicked. When I say "selected" I mean that some extra line appears around them and if I click anywhere this "selection" disappears. As my buttons only call a method I do not want them to stay "selected", but I have not found any documentation about this particular property. I attach as an example the code of some of my buttons, any help is welcome.

            
        </button> &nbsp; <button pButton pRipple type="button" icon="pi pi-globe"
             (click)="metodo=listaMetodos.camionesZona"
            (click)="busquedas.busqueda=filaSeleccionada.zona"
            (click)="this.llamarServicio(listaMetodos.camionesZona);">
        </button> ```

CodePudding user response：

This is because the button becomes focused (which is normal behaviour in HTML).

If you only want to avoid the extra border around the button, then a css-Rule like this might help:

button:focus {
   border: none;
}

I don‘t know the css settings of primeng buttons, maybe instead of a border there is outline or a shadow. In this case the css-rule should look like this:

button:focus {
   outline: none;
   box-shadow: none;
}