Text Color

[Belle Cruz]

How to change the text color when clicked and back to its original color when not selected.

[Thaneegairaj Sankar]

Hi Belle, 

 

We can able to change the text color when button is selected. Please find the below code example, 

 

@using Syncfusion.Blazor.Buttons 

 

<SfButton CssClass="e-flat" IsPrimary="true" Content="New"></SfButton> 

 

<style> 

    .e-btn:focus { 

        color: #000000 !important; 

        background-color: #FFFFFF !important; 

    } 

</style> 

 

 

Could you please check the above details and get back to us whether it fulfill your requirement or need further assistance on this. 

 

Regards,  

Thaneegairaj S 

[Belle Cruz]

For example when I clicked the Trashbin word, the color would change to white and when I clicked again it will back to it's ori

[Belle Cruz]

This is my code

Attachment: CPHeaderListBase_848f77b9.rar

[Belle Cruz]

This is the razor

Attachment: CPHeaderList_a82922c8.rar

[Sangeetha Priya Murugan]

Hi Belle, 

 

Your requirement to maintain the selected state of the button can be achievable by using the ButtonGroup single selection mode as like as below. 

 

Code Block: 

  

@using Syncfusion.Blazor.SplitButtons 

 

<SfButtonGroup Mode="SelectionMode.Single"> 

    <ButtonGroupButton>Left</ButtonGroupButton> 

 

</SfButtonGroup> 

<style> 

    .e-btn-group input:checked + label.e-btn{ 

        background-color:white !important; 

        color:black !important; 

    } 

</style> 

 

For your convenience, we have prepared the sample based on your requirement. Please find the link below. 

 

Sample Link:  https://www.syncfusion.com/downloads/support/forum/172681/ze/Server5.0-Btn-grp-1931694041  

 

Could you please check the above details and get back to us, if you need any further assistance on this? 

 

Regards, 

Sangeetha M