Change backgroud color of selected button within SfButtonGroup

[Jim Young]

I have looked through the css files and I cannot find an attribute that I can override to change the background color of a selected ButtonGroupButton within an SfButtonGroup. 

[Aravinthan Seetharaman]

Hi Jim, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your reported requirement. We can achieve your requirement by using CSS style. We have overridden the CSS style in ButtonGroupButton. Please refer below code snippets and Sample. 

 

 

@using Syncfusion.Blazor.SplitButtons 

 

<SfButtonGroup Mode="SelectionMode.Single"> 

    <ButtonGroupButton>Left</ButtonGroupButton> 

    <ButtonGroupButton @bind-Selected="@centerSelected">Center</ButtonGroupButton> 

    <ButtonGroupButton>Right</ButtonGroupButton> 

</SfButtonGroup> 

 

@code { 

    private bool centerSelected = true; 

} 

<style> 

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

        background-color: antiquewhite; 

        border-color: antiquewhite; 

    } 

</style> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/164358/ze/BtnGrp_Active_CSS-937667337  

 

Could you please check whether the above details are fulfilling your requirement, and get back to us if you need assistance on this. 

 

Regards, 

Aravinthan S