Color

[Ralph Hope]

I'm trying to colour radio buttons.  Your demo on here: https://blazor.syncfusion.com/documentation/radio-button/how-to/customize-radiobutton-appearance/

Doesn't work (they're all the same default colour)

Can you provide an updated example?

Thanks

[Aravinthan Seetharaman]

Hi Ralph Hope, 

  

We have checked your reported query, we would like to let you know that we have changed the cssClass from label to root element. So, you can resolve this issue by changing the code snippet as like in the below: 

@using Syncfusion.Blazor.Buttons 

 

 

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

<br /> 

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

 

@code { 

    private string stringChecked = "Danger"; 

} 

 

<style> 

    .e-success .e-radio:checked + label::after { /* csslint allow: adjoining-classes */ 

        background-color: #689f38; 

        color: #689f38 

    } 

 

    .e-success .e-radio:checked:focus + label::after, .e-success .e-radio:checked:hover + label::after { /* csslint allow: adjoining-classes */ 

        background-color: #449d44; 

    } 

 

    .e-success .e-radio:checked + label::before { 

        border-color: #689f38; 

    } 

 

    .e-success .e-radio:checked:focus + label::before, .e-success .e-radio:checked + label:hover::before { /* csslint allow: adjoining-classes */ 

        border-color: #449d44; 

    } 

 

    .e-success .e-radio + label:hover::before { 

        border-color: #b1afaf 

    } 

 

    .e-danger .e-radio:checked + label::after { /* csslint allow: adjoining-classes */ 

        background-color: #d84315; 

    } 

 

    .e-danger .e-radio:checked:focus + label::after, .e-danger .e-radio:checked + label:hover::after { /* csslint allow: adjoining-classes */ 

        background-color: #ba330a; 

    } 

 

    .e-danger .e-radio:checked + label::before { 

        border-color: #d84315; 

    } 

 

    .e-danger .e-radio:checked:focus + label::before, .e-danger .e-radio:checked + label:hover::before { 

        border-color: #ba330a; 

    } 

 

    .e-danger .e-radio + label:hover::before { 

        border-color: #b1afaf 

    } 

</style> 

However, we will consider this and refresh in our online demo site. Please check the above code snippet and get back to us if you need further assistance on this. 

Regards, 

Aravinthan S 

[Michael Meier]

Can you also add a gray color if the Radiobutton has Disabled='true' ? I try a lot of things but could not get it to work.

[YuvanShankar Arunagiri]

Hi Micheal,

We have checked your reported query and prepared the sample based on your requirement. please refer the below code snippet. Using the below CSS, we can achieve your requirement.

@using Syncfusion.Blazor.Buttons

 

<SfRadioButton Label="Option 1" Name="default" Value="Checked" @bind-Checked="stringChecked"></SfRadioButton>

<br />

<SfRadioButton Label="Option 2" Name="default" Value="Disable" @bind-Checked="stringChecked" Disabled="true"></SfRadioButton>

<br />

<SfRadioButton Label="Option 3" Name="default" Value="None" @bind-Checked="stringChecked"></SfRadioButton>

 

@code {

    private string stringChecked = "Disable";

}

 

<style>

    .e-radio:disabled:checked + label::before {

        background-color: grey !important;

    }

</style>

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

 

Regards, 

YuvanShankar A

[Michael Meier]

That woks great! Thanks.

[YuvanShankar Arunagiri]

You are welcome, Michael. We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.

[Michael Meier]

Well maybe super cool would be ... how can I change the textcolor of the label in disabled state of the radiobox ?

Because I have a dark background I already change the textcolor of the label with:

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

        color: antiquewhite;

    }

<SfRadioButton Label="Direction" Name="status" Value="top" TChecked="string" @bind-Checked="@sDirection" CssClass="e-primary" Disabled="@bDirectionTop" ValueChange="OnValueChange"></SfRadioButton>

[YuvanShankar Arunagiri]

Hi Michael,

We have checked your reported query and prepared the sample based on your requirement. please refer the below code snippet. Using the below CSS, we can achieve your requirement.

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

        color: antiquewhite;

    }

 

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

        color: gray !important;

    }

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

Regards, 

YuvanShankar A

Attachment: Index_25b49f2b.zip