Primeng 样式手风琴在焦点时从 header 中删除轮廓

Question

聚焦时，手风琴在 header 中有一个上划线，如按钮和其他东西。我想删除它，但我尝试过的样式不起作用。这就是我现在得到的：

我以前在面板上遇到过这个问题，我使用

解决了

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

所以我尝试了：

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

（背景颜色只是为了检查是否有事情发生）它只有在被选中时才会获得背景颜色，但“焦点”没有任何变化属性。

我也试过了

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

而且它只有在关闭而不是“聚焦”时才会获得背景颜色。如果我省略 ::ng-deep 部分，则什么也不会发生。

我附上手风琴的 html 代码，以防它能提供帮助：

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

Answer 1

您应该专门针对 header 的聚焦状态。将 :focus 添加到您的选择器中，如下所示：

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

Primeng 样式手风琴在焦点时从 header 中删除轮廓

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

html

css

accordion

primeng

angular