CODEWITHSUNDEEP
cssangularionic-frameworkprimengtabmenu
jcmendes98
jcmendes98

Reputation: 148

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

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.

Upvotes: 1

Views: 7766

Answers (4)

Viraj_Zanda
Viraj_Zanda

Reputation: 101

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

Upvotes: 0

Ragavan Rajan
Ragavan Rajan

Reputation: 4397

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.

Upvotes: 5

CodeChanger
CodeChanger

Reputation: 8351

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.

enter image description here

Hope this will helps!

Upvotes: 1

dmr
dmr

Reputation: 19

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

Upvotes: 1

Related Questions