styling: how to override primeng tabmenu border-colors on active element-CodePudding

I currently have a global blue theme (saga-blue). I managed to change the text and bottom border color (to match the desired brand colors) by using simple css.

However, when a menu item is first selected, it gets this ugly blue-colored border behind it, as such: https://imgur.com/SYF7xmJ

No matter what CSS I try, I can't manage to remove it. I can't find where it comes from when I inspect the element. Also, it gets removed as soon as I click anywhere else on the screen: it is just there for the first click on the item, goes away after any other click.

CSS that I have tried:


.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
    color: $brand-red;
    border-left: 0px !important;
    border-right: 0px !important;
}

.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight {
    color: $brand-red;
    border-left: 0px !important;
    border-right: 0px !important;
}

I also tried unsetting any property that had to do with 'left' or 'right' on the menuitem and menulink components - but the ugly blue border just keeps on showing. If anyone has any idea what kind of property this might be, I would really appreciate it.

CodePudding user response：

Try outline: 0 this is something that defaults browsers do for accesibility mainly.

CodePudding user response：

If your style is not applied and you want to override the primeng default styling, you may need to use :host ::ng-deep.

Another way of applying style to a PrimeNG component nested element, is to use the styleClass template property. It is not everytime efficient, you need to sometime force the css through the !important priority modifier. It is not the cleanest way, but there is few CSS properties that are inlined by calculation on some component.

For your specific problem, the .p-tabmenu (and subclasses) is playing with a mixin of focus, when the element is in focus state.

@mixin focused() {
    outline: $focusOutline;
    outline-offset: $focusOutlineOffset;
    box-shadow: $focusShadow;
}

You need to play with the property box-shadow to remove/modify this blurred color that you dislike with the advices I gave you on the primeng styling if it is not applied as you wished.

Don't forget the pseudo-class :focus while overriding the style.

You may have this kind of result to remove it completely.

:host ::ng-deep .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link:focus {
     box-shadow: none;
}