Materialize: Can't change tab text nor underline color

[newmanw]

How do you change a tab bar text and underline color?

[acburst]

added to Sass variables in e837e79bdcc46a2ded5d125e2e55d60159ad6c27

[alanjames1987]

It would be great to be able to change the underline color with HTML, like we can with other elements.

[BrenoMazieiro]

Just use
div class="indicator orange" style="z-index:1" /div
before the
/ul

[ndraiman]

this worked for me:
override in your css file the following rule:

.tabs .indicator {
    color: <ur color>;
}

[saadq]

^ The above worked for me to change the tab's underline color, but I had to use background-color:

.tabs .indicator {
    background-color: <ur color>;
}

[curliq]

Neither of these is working here.

[cande1gut]

@joaosardinha did you put !important after the color?

.tabs .indicator { background-color: <ur color> !important; }

[jamiewaese]

saadq's answer works perfectly. To be clear, however:
.tabs .indicator { background-color: #99cc00; }
The <ur color> needs to be an actual color, without the <> symbols
I needed to do a force refresh before seeing the change.

[g5codyswartz]

Building onto @BrenoMazieiro so that his code is readable

Add this right before the </ul>

<div class="indicator orange" style="z-index:1"></div>

[ghost]

No one has stated how to change the text color? That salmon color is disgusting.

[ndraiman]

@Native-Coder

.tabs .tab a.active {
  color: <my-color>;
}

.tabs .tab a:hover {
  color: <my-color>;
}

.tabs .tab a {
  color: <my-color>;
}

notice .active is not a pseudo class, but an actual class name.

[benjaminadk]

combo of things mentioned:

1. active is indeed a css class here. my markup is a yellow scheme

.tab a.active {
  color:rgb(252, 234, 37)!important;
  background-color:rgb(3, 169, 244)!important;
}

2.I add the indicator and "color of your choice" classes AFTER the

<ul class="tabs tabs-fixed-width light-blue">
                   <div class="indicator yellow" style="z-index:1"></div>

I battled with this absolutely heinous pink for a few hours.

[midgardemon]

Thanks benjaminadk! puting the div after ul did the trick!

[hiteshsahu]

WIth JQuery

```
// TAB Color
$(".tabs" ).css("background-color", themeColor);

// TAB Indicator/Underline Color
$(".tabs>.indicator").css("background-color", '#FFF');

// TAB Text Color
$(".tabs>li>a").css("color", '#FFF');

```

where theme color is the color of your choice

[BenjaminMichael]

the tab colors can be set with the usual classes red, brown, blue, etc

these were the parts i had to do css to change (thanks to everyone above but nobody had all these put together for me)

.tab a.active {
  color:rgb(252, 234, 37)!important;
  background-color:#448AFF!important;
}
.tabs .tab a:hover {
  background-color: #bcaaa4!important;
  color:#FFFFFF!important;
}
.tabs .tab a {
  color: #efebe9!important;
}
.tabs .indicator{
  background-color:#FFFFFF!important;
}

[JayHoltslander]

None of these worked well.

Here's how to do it in a way that doesn't involve using jQuery, extra classes, or !important.
It includes all components and is in SCSS format.

scss // TABS COLORS .tabs { .tab { a { color: purple; &.active {color: purple;} &:hover {color: purple;} &:focus { background-color:lime; &.active{background-color:lime} } } } .indicator {background-color: purple;} }
Working demo

[dmancecrg]

I am working with angular 6 I tried all of your solutions but none of them has worked:

This is my actual code:

<div class="row">
    <div class="col s12 m12 l12 xl12">
      <ul class="tabs tabs-fixed-width" id="chartstabs">
          <div class="indicator orange" style="z-index:1"></div>
        <li class="tab" *ngFor="let view of views">
          <a href="#tab{{view.id}}" (click)="loadTab(view)">{{view.name}}</a>
        </li>
      </ul>
    </div>
  </div>

And when I use this css is not working:

.tabs .indicator {
    background-color: blue !important; 
}

OR

.li .indicator {
    background-color: blue !important;
}

I have tried the
<div class="indicator indigo darken-4" style="z-index:1"></div>

And it did not working.

I am using materialize 1.0.0, just updated today.

[edsoncamargo]

WIth JQuery

  // TAB Color
   $(".tabs" ).css("background-color", themeColor);

   // TAB Indicator/Underline Color
   $(".tabs>.indicator").css("background-color", '#FFF');

   // TAB Text Color
   $(".tabs>li>a").css("color", '#FFF');

where theme color is the color of your choice

Awesome!

[MarcSerretCRG]

I am working with angular 6 I tried all of your solutions but none of them has worked:

This is my actual code:

<div class="row">
    <div class="col s12 m12 l12 xl12">
      <ul class="tabs tabs-fixed-width" id="chartstabs">
          <div class="indicator orange" style="z-index:1"></div>
        <li class="tab" *ngFor="let view of views">
          <a href="#tab{{view.id}}" (click)="loadTab(view)">{{view.name}}</a>
        </li>
      </ul>
    </div>
  </div>

And when I use this css is not working:

.tabs .indicator {
    background-color: blue !important; 
}

OR

.li .indicator {
    background-color: blue !important;
}

I have tried the
<div class="indicator indigo darken-4" style="z-index:1"></div>

And it did not working.

I am using materialize 1.0.0, just updated today.

I'm getting the same bug

[ghost]

I am working with angular 6 I tried all of your solutions but none of them has worked:
This is my actual code:

<div class="row">
    <div class="col s12 m12 l12 xl12">
      <ul class="tabs tabs-fixed-width" id="chartstabs">
          <div class="indicator orange" style="z-index:1"></div>
        <li class="tab" *ngFor="let view of views">
          <a href="#tab{{view.id}}" (click)="loadTab(view)">{{view.name}}</a>
        </li>
      </ul>
    </div>
  </div>

And when I use this css is not working:

.tabs .indicator {
    background-color: blue !important; 
}

OR

.li .indicator {
    background-color: blue !important;
}

I have tried the
<div class="indicator indigo darken-4" style="z-index:1"></div>
And it did not working.
I am using materialize 1.0.0, just updated today.

I'm getting the same bug

[ghost]

.tabs .indicator {

background-color: blue !important;

}

attach this lines in styles.css