Tag: materialize

When using the excellent Materialize CSS framework, it isn’t immediately obvious how to to change both text and indicator/underline colour of Tabs using only HTML and the Materialize colour classes (i.e. no changes to CSS).

To change the text color, just add the text-colour classes to the <a> tags, e.g.:

<a class="indigo-text text-darken-4" href="#test1">Test 1</a>

To change the indicator/underline colour, you can insert this before the </ul>:

<div class="indicator indigo darken-4" style="z-index: 1;"></div>

To wrap this up as a complete, 2-tab, example:

<div class="row">
  <div class="col s12">
    <ul class="tabs">
      <li class="tab col s6">
        <a class="active indigo-text text-darken-4" href="#test1">Test 1</a>
      </li>
      <li class="tab col s6">
        <a class="indigo-text text-darken-4" href="#test2">Test 2</a>   
      </li>
      <div class="indicator indigo darken-4" style="z-index: 1;">
      </div>
    </ul>
  </div>
  <div id="test1" class="col s12">Test 1</div>
  <div id="test2" class="col s12">Test 2</div>
</div>