Change the color of selected Tab, of TabMenu PRIMENG - style

Question

I'm using primeng component tab menu. https://www.primefaces.org/primeng/#/tabmenu I can't find a way to change the color of the selected TAB, to a different one.

Answer 1

Sorry for the delayed answer. Just to keep in mind you should add :host ::ng-deep before your css class to override any style

:host ::ng-deep .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-active {
    background-color: #d90096; //<Replace your custom color>
    border: 1px solid #d600d9;
}

Hopefully it will save your time.

Answer 2

This works for me. ui-tabview-selected will change the colour of the selected tab. ui-state-default.ui-state-active background should be added to give colour to the remaining area.

.ui-tabview .ui-tabview-nav li.ui-tabview-selected a {  
    background-color: rgb(57, 235, 175);
}

.ui-tabview .ui-tabview-nav li.ui-state-default.ui-state-active {
    background: #f55555;
}

Try this link Styling PrimeNG p-tabView, I got some codes and modified them on my code.

You can have a better understanding of what encapsulation: ViewEncapsulation.None by referring to this line.

Diff between ViewEncapsulation.Native, ViewEncapsulation.None and ViewEncapsulation.Emulated

Answer 3

Have you tried:

    body .ui-tabview.ui-tabview-top .ui-tabview-nav li.ui-state-active {
    background-color: red;
}

Source: https://forum.primefaces.org/viewtopic.php?t=58188

Answer 4

You can override its default CSS selector like below:

body .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-active {
    background-color: #d90096; //<Replace your custom color>
    border: 1px solid #d600d9;
}

Another way to user upper tag binding with <li>

li.ui-tabmenuitem.ui-state-default.ui-state-active {
   background-color: #d90096; //<Replace your custom color>
   border: 1px solid #d600d9;
}

You need to change both background-color & border so it will apply.

You can inspect from demo UI and update lively over there, for more info please refer below screenshot.

Hope this will helps!