change the color of tab text and the underline in materialize framework

Question

The default color of materialize tabs are pinkish. Also the underline for the active tab. I want to customize that and add some styles. How do I do that?

score 30 · Accepted Answer · answered Dec 31 '16 at 08:53

30

Images: Active tab and Tab2 on hover

Code changes in CSS for the effects in above 2 images :

        .tabs .tab a{
            color:#000;
        } /*Black color to the text*/

        .tabs .tab a:hover {
            background-color:#eee;
            color:#000;
        } /*Text color on hover*/

        .tabs .tab a.active {
            background-color:#888;
            color:#000;
        } /*Background and text color when a tab is active*/

        .tabs .indicator {
            background-color:#000;
        } /*Color of underline*/

answered Dec 31 '16 at 08:53

Kruthika C S

729
1
7
18

Hope this helps ppl looking for the same question :) – Kruthika C S Dec 31 '16 at 09:04
add !important to this part of the CSS " .tabs .tab a.active", otherwise it will be reset to the default every time you change tabs, ie the javascript will reset it. – WebDev-SysAdmin Dec 22 '21 at 19:09

score 11 · Answer 2 · answered Dec 01 '18 at 14:15

The best way to add custom CSS to Materialize 1.0.0 default tabs is the following:

.tabs .tab a {
  color: rgba(38, 166, 154, 0.7);
  /*Custom Text Color*/
}

.tabs .tab a:hover {
  color:#26a69a;
  /*Custom Color On Hover*/
}

.tabs .tab a:focus.active {
  color:#26a69a;
  /*Custom Text Color While Active*/
  background-color: rgba(38, 166, 154, 0.2);
  /*Custom Background Color While Active*/
}

.tabs .indicator {
  background-color:#26a69a;
  /*Custom Color Of Indicator*/
}

*If you want to keep the default styling of the framework, use the RGBA values as they are in the example.

Make sure to add !important to the "custom background color while active" part of the CSS: otherwise it will be overridden when the javascript changes tabs. — WebDev-SysAdmin, Dec 22 '21 at 19:08

score -1 · Answer 3 · answered Jun 20 '18 at 09:01

For the underline color add <div class="indicator orange" style="z-index:1"></div> right before the </ul>, and for the text color use this <li class="tab col s3"><a href="#test1" class="teal-text">Test 1</a></li>

eg:

<ul class="tabs transparent" materialize="tabs">
  <li class="tab col s3">
    <a href="#test1" class="teal-text">Test 1</a>
  </li>
  <li class="tab col s3">
    <a href="#test2" class="teal-text">Test 2</a>
  </li>
  <div class="indicator teal" style="z-index:1"></div>
</ul>

score -2 · Answer 4 · answered Dec 31 '16 at 08:26

-2

Its very easy to apply predefined classes in materialize.

Just Refer Page : http://materializecss.com/color.html

Here I have applied classes teal lighten-2 but there are various combination of classed from which you can choose from. Additionally you can write your own custom class and apply that too.

HTML :

<div class="row">
  <div class="col s12">
    <ul class="tabs teal lighten-2">
      <li class="tab col s3"><a href="#test1">Test 1</a></li>
      <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
      <li class="tab col s3"><a href="#test3">Test 3</a></li>
    </ul>
  </div>
  <div id="test1" class="col s12">Test 1</div>
  <div id="test2" class="col s12">Test 2</div>
  <div id="test3" class="col s12">Test 3</div>
  <div id="test4" class="col s12">Test 4</div>
</div>

JSFiddle : http://jsfiddle.net/nikdtu/doska9qe/

answered Dec 31 '16 at 08:26

Nikhil Maheshwari

2,198
18
25

@KruthikaCS : Happy to help ! :) – Nikhil Maheshwari Dec 31 '16 at 08:46
@Adarsh : What exactly, have you checked the fiddle http://jsfiddle.net/nikdtu/doska9qe/ ? – Nikhil Maheshwari Jul 19 '17 at 12:15
@Adarsh : You need to include css and js as well on page. – Nikhil Maheshwari Jul 19 '17 at 12:23
I'm already using Tabs but this method didn't work for me. It's making everything teal. I just want fonts and the underline. – Adarsh Sojitra Jul 19 '17 at 12:25
@Adarsh : You have not configured your code man. Take proper reference from JSFiddle. You should be able to get it. – Nikhil Maheshwari Jul 19 '17 at 12:49
@Adarsh, please check my answer above: https://stackoverflow.com/a/41406867/7253565 It covers all most everything related to materialize tabs I've added pictures for reference too. – Kruthika C S Nov 30 '17 at 05:15
The question is not about tabs background color, it's about underline color and text color. CSS is required to change such color. – gegobyte Nov 26 '18 at 11:21

change the color of tab text and the underline in materialize framework

4 Answers4