1. Home
  2. Forum
  3. Blazor
  4. Tabs style

Tabs style

Hi Team,

How to change font color and border color in active Tab item? (default is red, I'm using material css)

Regards

5 Replies 1 reply marked as answer
AK Alagumeena Kalaiselvan Syncfusion Team July 3, 2020 05:57 AM UTC

Hi Jorge, 

Greeting from Syncfusion support. 

We have checked your reported case “how to change font and border color of active tab item” and we suggest you override the below CSS classes at sample end which changes the font and border color of active Tabitem. Refer to the below styles for that. 

<style> 
    .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text { 
        color: blueviolet !important       // To change the font color of active Tab 
    } 
    .e-tab .e-tab-header .e-indicator { 
        background: black !important;     // To change the border color 
    } 
</style> 

The above sample can be get by the following link. 

Kindly get back to us, if you need further assistance. 

Regards 
Alagumeena.K 


Marked as answer
JQ Jorge Quesada July 3, 2020 03:38 PM UTC

Hi Alagumeena,

It works perfectly, thanks for your help! 

Regards

VM Vengatesh Maniraj Syncfusion Team July 6, 2020 04:21 AM UTC

Hi Jorge, 

You are most welcome. 

Please get in touch with us if you need any further assistance. 

Regards, 
Vengatesh  


MI Michele June 25, 2021 03:42 PM UTC

Is it possible to set a different color for each tab header in sfTab?


SK Satheesh Kumar Balasubramanian Syncfusion Team June 28, 2021 12:10 PM UTC

Hi Michele, 
  
Thanks for your update. 
  
We have validated your reported query "Is it possible to set a different color for each tab header in sfTab?" and we suggest you to override the below CSS classes at sample end using TabItem CssClass property which changes the color for each tab header. For the same we have prepared a sample for your reference which can be downloaded from the following link. 
  
Index.razor:  
<SfTab> 
    <TabItems> 
        <TabItem CssClass="html"> 
        </TabItem> 
        <TabItem CssClass="java"> 
        </TabItem> 
        <TabItem CssClass="javascript"> 
        </TabItem> 
    </TabItems> 
</SfTab> 
  
<style> 
    .e-tab .e-tab-header .e-toolbar-item.html { 
        background: #ff000080; 
    } 
    .e-tab .e-tab-header .e-toolbar-item.java { 
        background: #ffff0080; 
    } 
    .e-tab .e-tab-header .e-toolbar-item.javascript { 
        background: #00800080; 
    } 
    .e-tab .e-tab-header .e-toolbar-item.html.e-ileft .e-tab-text, 
    .e-tab .e-tab-header .e-toolbar-item.e-active.html.e-ileft .e-tab-text { 
        color: #fff; 
    } 
    .e-tab .e-tab-header .e-toolbar-item.java.e-ileft .e-tab-text, 
    .e-tab .e-tab-header .e-toolbar-item.e-active.java.e-ileft .e-tab-text { 
        color: red; 
    } 
    .e-tab .e-tab-header .e-toolbar-item.javascript.e-ileft .e-tab-text, 
    .e-tab .e-tab-header .e-toolbar-item.e-active.javascript.e-ileft .e-tab-text { 
        color: #ffff0080; 
    } 
</style> 
  
Kindly try the above sample and let us know if this meets your requirement. 
  
Regards, 
Satheesh Kumar B 


Loader.
Up arrow icon