How-to customize radio button drawing?

[KroMignon]

Hi all,

I want to customize radio button control, but I don't know how to start!

At minimum, I need to change check state color.
The perfect solution would be to be able to customize appearance, for example with UTF8 check mark (U+2714) or UTF8 ballot (U+2718)

I suppose it is not so complicated to do, but I am a beginner and I did not find anything in documentation.
What would be the best way to do?

Thanks for any help

[stsrki]

The closest to what you want to achieve, without doing any custom styles is:

<RadioGroup TValue="int" @bind-CheckedValue="@checkedValue" Buttons="true">
    <Radio TValue="int" Value="1">
        @if ( checkedValue == 1 )
        {
            <Icon Name="IconName.Check" />
        }
        else
        {
            <Icon Name="IconName.Times" />
        }
    </Radio>
    <Radio TValue="int" Value="2">
        @if ( checkedValue == 2 )
        {
            <Icon Name="IconName.Check" />
        }
        else
        {
            <Icon Name="IconName.Times" />
        }
    </Radio>
    <Radio TValue="int" Value="3">
        @if ( checkedValue == 3 )
        {
            <Icon Name="IconName.Check" />
        }
        else
        {
            <Icon Name="IconName.Times" />
        }
    </Radio>
</RadioGroup>
@code{
    int checkedValue = 1;
}

Otherwise only way to customize is by using custom CSS.

[KroMignon]

Thanks again @stsrki

I will try this out, but in fact, my idea was in fact to use a component specific CSS, which is possible with .Net 5.
But I did not know how the current CSS for radio button looks like and how to specify CSS style to use.

Perhaps your solution is the easiest to go :)
Is there a way to change color?