1

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.

jcmendes98
  • 148
  • 1
  • 10

4 Answers4

5

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.

Ragavan Rajan
  • 4,171
  • 1
  • 25
  • 43
1

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

dmr
  • 9
  • 2
1

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!

CodeChanger
  • 7,953
  • 5
  • 49
  • 80
  • I have added another way to override class. check my update answer – CodeChanger Sep 17 '19 at 10:51
  • I add it to my scss and it does nothing, even with !important. Don't know why... Tried it a billion times already. Thanks for your time. I must have a stupid error somewhere. – jcmendes98 Sep 17 '19 at 11:01
  • I DID IT! Don't know why but the only way i could make the scss work was to paste it on the app.scss instead of the page scss. Working in an Ionic project. It must be a bug... – jcmendes98 Sep 17 '19 at 11:03
  • I would rather have the css styling in a theme rather than styling it an app level – Nitin Avula Sep 18 '19 at 15:30
  • it work on page level if you add :host ::ng-deep as Ragavan Rajan said. Otherwise i will only work on app level scss. – jcmendes98 Sep 19 '19 at 11:02
0

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

Viraj Sandaruwan
  • 51
  • 5
  • Parts of your answer are link-only, which is considered not an answer on StackOverflow. Other parts are answering, but sadly in code-only. Which is seen as an answer, but not a good one. Also quoting questions which OP has asked in comments puts your post at risk of being mistaken (by lazy readers) for a question instead of an answet. Please make the asker to create separate questions and answer there. Note that questions which contain several questions are usually flagged and closed as lacking focus. Not your fault, but you might end up on the suffering end here.... – Yunnosch Jun 11 '20 at 06:18
  • You can comment on this, your own post, to ask OP to edit their question and create new ones. But I also did that in a direct comment for you already. – Yunnosch Jun 11 '20 at 06:19
  • "code-only" means your answer only contains code, but no explanation how it works and why it helps to solve the problem described in the question. It gives the false impression that StackOverflow is a free code writing service. So please [edit] and add explanation. – Yunnosch Jun 11 '20 at 06:24