Tab component - remove underline from selected tab

Question

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.

Satheesh Kumar Balasubramanian · Accepted Answer

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>

<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>

<style>

.e-tab.underline-removal .e-tab-header .e-toolbar-items .e-indicator.e-ignore {

display: none;

}

</style>

Sample: https://www.syncfusion.com/downloads/support/forum/162461/ze/TabComponent1187497986

Kindly try the above solution and get back to us if you need any further assistance.

Regards,

Satheesh Kumar B