CODEWITHSUNDEEP
htmlcssangularaccordionprimeng
Videgain
Videgain

Reputation: 195

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

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}}" class="fuente" [(selected)]="mostrarPanelMovil">
            <div class="p-grid p-fluid">
           

                <div class="p-field p-col-12 p-md-2">
                    <span class="p-buttonset">
                        <button pButton pRipple class="p-button-outlined p-button-secondary" icon="pi pi-chevron-left"
                            (click)="restarSemana()" (click)="mostrarPanelMovil=false" [disabled]="desactivarBotones"></button>
                        <button pButton pRipple icon="pi pi-pause" class="p-button-outlined p-button-secondary"
                            (click)="semanaActual()" (click)="mostrarPanelMovil=false" [disabled]="desactivarBotones"></button>
                        <button pButton pRipple icon="pi pi-chevron-right" class="p-button-outlined p-button-secondary"
                            (click)="sumarSemana()" (click)="mostrarPanelMovil=false" [disabled]="desactivarBotones"></button>
                    </span>
                </div>
        </p-accordionTab>
        </p-accordion>

Upvotes: 1

Views: 2408

Answers (1)

Shai
Shai

Reputation: 3872

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;
}

Upvotes: 3

Related Questions