How to custom the close button ?

[OuYuanbin]

I have a server-side Blazor app using the SfTab.

How can I to set the size of the close button ? And，how  can I to custom the effect of the close button when hovering?

Thanks

[Satheesh Kumar Balasubramanian]

Hi OuYuanbin, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "How to custom the close button" and suggest you to use the below customized style to achieve your requirement. For the same we have prepared a sample which can be downloaded from the following link. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/168178/ze/CloseIcon-132918261 

  

Index.razor:  

<SfTab ShowCloseButton="true" CssClass="customize-close-icon">

..........................................................

</SfTab>

<style>

    .customize-close-icon.e-tab .e-tab-header .e-toolbar-item .e-close-icon, .customize-close-icon.e-tab .e-tab-header .e-toolbar-item .e-close-icon::before {

        font-size: 15px;

    }

    .customize-close-icon.e-tab .e-tab-header .e-toolbar-item .e-close-icon:hover {

        color: red;

    }

</style>

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B 

[OuYuanbin]

Thanks，it worked fine when I  customize the effect of the close button when hovering, but it didn't work when I set the font-size to 10px,  Is there a limit on the minimum size？

[Vinitha Devi Murugan]

Hi OuYuanbin, 

 

Thanks for your update. 

 

We have validated your reported “it worked fine when I  customize the effect of the close button when hovering, but it didn't work when I set the font-size to 10px,  Is there a limit on the minimum size？” issue at our end by modifying the icon size as 10px with below code. Since the icon size applied properly at our end. Please refer to the  below screenshot of working sample. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/168178/ze/CloseIcon1060515747  

 

.customize-close-icon.e-tab .e-tab-header .e-toolbar-item .e-close-icon, .customize-close-icon.e-tab .e-tab-header .e-toolbar-item .e-close-icon::before { 

    font-size: 10px; 

} 

.customize-close-icon.e-tab .e-tab-header .e-toolbar-item .e-close-icon:hover { 

    color: red; 

} 

 

Output: 

 

 

Kindly refer the above sample, If you still facing the same problem share us the below details to serve your better.  

• Replicate your problem in the above shared sample or
• Share a sample illustrating the problem which would help us to proceed further.

Regards, 

Vinitha