Primeng styling accordion to remove the outline from the header when focus-CodePudding

The accordion gets an overline in the header when focused, as buttons and other stuff. I want to remove it, but the styling I have tried does not work. This is what I get right now:

I have faced this issue before with a panel and I got is solved by using

.p-panel .p-panel-header .p-panel-header-icon:focus {
  box-shadow: none !important;
}

So I tried:

::ng-deep .p-accordion .p-accordion-header  {
  background-color: black;
 outline: none;
box-shadow: none; 
}

(The background color is just to check if something is happening) And it gets the background color only when selected, but nothing changes about that "focus" property.

I also tried

::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link  {
  background-color: black;
 outline: none;
box-shadow: none; 
}

And it only gets the background color when it is closed and not "focused". If I omit the ::ng-deep part just nothing happens.

I attach the html code of the accordion in case it can help:

<p-accordion *ngIf="mostrarControles==true && datos && vistaMovil==true">
        <p-accordionTab header="{{datos.driver}} y {{datos.codriver}}"  [(selected)]="mostrarPanelMovil">
            <div >
           

                <div >
                    <span >
                        <button pButton pRipple  icon="pi pi-chevron-left"
                            (click)="restarSemana()" (click)="mostrarPanelMovil=false" [disabled]="desactivarBotones"></button>
                        <button pButton pRipple icon="pi pi-pause" 
                            (click)="semanaActual()" (click)="mostrarPanelMovil=false" [disabled]="desactivarBotones"></button>
                        <button pButton pRipple icon="pi pi-chevron-right" 
                            (click)="sumarSemana()" (click)="mostrarPanelMovil=false" [disabled]="desactivarBotones"></button>
                    </span>
                </div>
        </p-accordionTab>
        </p-accordion>

CodePudding user response：

You should target specifically the focused state of the header. Add :focus to your selector, like this:

::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link:focus {
    box-shadow: none !important;
}