Change button size, font size ans text color

[Thijs van Rijswijk]

Hi,

How can i change the button, font size and text color of a radio button?

We are going to use the program on a tablet and standard is too small.

I look into the documentation but i can't find anything about teh stand appearance.

Best regards,

Thijs van Rijswijk

[Gayathri KarunaiAnandam]

Hi Thijs van Rijswijk, 

We have checked your reported query. We can achieve your requirement by overriding the default CSS style. Please check the below code snippet. 

Code snippet: 

<SfRadioButton Label="Primary" Name="custom" CssClass="e-primary" Value="Primary" @bind-Checked="stringChecked"></SfRadioButton> 

<br /> 

<SfRadioButton Label="Success" Name="custom" CssClass="e-success" Value="Success" @bind-Checked="stringChecked"></SfRadioButton> 

@code { 

    private string stringChecked = "Primary"; 

} 

 

<style> 

/*To customize label */ 

    .e-primary .e-radio+label .e-label { 

     color: red; 

    font-size: 20px; 

    } 

    .e-success .e-radio+label .e-label { 

     color: green; 

    font-size: 20px; 

    } 

/*To customize button size */ 

    .e-radio+label::after{ 

        left : 6.7px; 

        top: 6.7px; 

    } 

    .e-radio+label::before{ 

        width:21px; 

        height: 21px; 

    } 

</style> 

For your reference, please check the below sample link. 

Sample: https://www.syncfusion.com/downloads/support/forum/170698/ze/Server5.01735471681 

Sample output: 

 

To know more about Radiobutton appearance, please check the below link. 

Documentation : https://blazor.syncfusion.com/documentation/radio-button/how-to/customize-radiobutton-appearance 

Please check and get back to us, if you need further assistance. 

Regards, 

Gayathri K