Tab component - remove underline from selected tab

I'm using the material theme and it puts a red underline under the text of the selected tab. I haven't decided if I want to remove it or change the color.

1. What css classes do I need to override to change the color?
2. How do I remove it completely?

Thank you.

1 Reply 1 reply marked as answer

SK Satheesh Kumar Balasubramanian Syncfusion Team February 11, 2021 11:50 AM UTC

Hi Andy, 
  
Greetings from Syncfusion Support..! 
  
Query 1: 
  
We have validated your reported query "What css classes do I need to override to change the color?" at our end. We have achieved your requirement using below customized style through Tab CssClass property. 
  
Index.razor:    
<SfTab CssClass="underline-customize"> 
..... 
..... 
</SfTab> 
  
<style> 
    .e-tab.underline-customize .e-tab-header .e-toolbar-items .e-indicator.e-ignore { 
        background: cyan; 
    } 
</style> 
  
Query 2: 
  
We have validated your reported query "How do I remove it completely?" at our end. We have achieved your requirement using below customized style through Tab CssClass property. 
  
Index.razor:    
<SfTab CssClass="underline-removal"> 
.... 
.... 
</SfTab> 
  
<style> 
    .e-tab.underline-removal .e-tab-header .e-toolbar-items .e-indicator.e-ignore { 
        display: none; 
    } 
</style> 
  
  
Kindly try the above solution and get back to us if you need any further assistance. 
  
Regards, 
Satheesh Kumar B 



Marked as answer
Loader.
Up arrow icon