title: Angular Material customize tab
body: <p>I'm using angular 4 and I'm using <a href="https://material.angular.io/" rel="noreferrer">Angular Material</a>.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;md-tab-group [disableRipple]=true&gt;
      &lt;md-tab label="Tab 1"&gt;&lt;/md-tab&gt;
      &lt;md-tab label="Tab 2"&gt;&lt;/md-tab&gt;
  &lt;/md-tab-group&gt;
  </code></pre>
  
  <p>How can I fully customize the background color when (not-selected / selected), text color, and etc. I've already tried using pseudo classes...but still no avail. --- I have set the <code>font-size</code> successfully but the text color is a little bit jittery when set. Please help.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I've tried to change the background to transparent when selected...trying to override the color when the link is not selected in the tab and etc..but still doesn't work. </p>
  
  <pre class="lang-css prettyprint-override"><code>/* Styles go here */
  
    .mat-tab-label{
      color:white;
      min-width: 25px !important;
      padding: 5px;
         background-color:transparent;
          color:white;
          font-weight: 700;
    }
  
    /deep/ .mat-tab-label{
      min-width: 25px !important;
      padding: 5px;
         background-color:transparent;
          color:white;
          font-weight: 700;
  }
  
  .md-tab.ng-scope.ng-isolate-scope.md-ink-ripple.md-active{
        background-color:transparent;
        color:white;
        font-weight: 700;
    }
  
  .md-tab.ng-scope.ng-isolate-scope.md-ink-ripple{
      background-color:transparent;
      color:white;
      font-weight: 700;
  }
  
  
  
  .mat-tab-label:active{
      min-width: 25px !important;
      padding: 5px;
         background-color:transparent;
          color:white;
          font-weight: 700;
  }
  
  .mat-tab-label:selected{
      min-width: 25px !important;
      padding: 5px;
         background-color:transparent;
          color:white;
          font-weight: 700;
  }
  </code></pre>