Customize RadioButton Appearance

@using Syncfusion.EJ2.Blazor.Buttons

<EjsRadioButton Label="Primary" Name="custom" CssClass="e-primary"></EjsRadioButton><br />
<EjsRadioButton Label="Success" Name="custom" CssClass="e-success"></EjsRadioButton><br />
<EjsRadioButton Label="Info" Name="custom" CssClass="e-info"></EjsRadioButton><br />
<EjsRadioButton Label="Warning" Name="custom" CssClass="e-warning"></EjsRadioButton><br />
<EjsRadioButton Label="Danger" Name="custom" Checked="true" CssClass="e-danger"></EjsRadioButton>

<style>
    .e-radio:checked + .e-success::after { /* csslint allow: adjoining-classes */
        background-color: #689f38;
    }

    .e-radio:checked:focus + .e-success::after, .e-radio:checked + .e-success:hover::after { /* csslint allow: adjoining-classes */
        background-color: #449d44;
    }

    .e-radio:checked + .e-success::before {
        border-color: #689f38;
    }

    .e-radio:checked:focus + .e-success::before, .e-radio:checked + .e-success:hover::before { /* csslint allow: adjoining-classes */
        border-color: #449d44;
    }

    .e-radio + .e-success:hover::before {
        border-color: #b1afaf
    }

    .e-radio:checked + .e-info::after { /* csslint allow: adjoining-classes */
        background-color: #2196f3;
    }

    .e-radio:checked:focus + .e-info::after, .e-radio:checked + .e-info:hover::after { /* csslint allow: adjoining-classes */
        background-color: #0b7dda;
    }

    .e-radio:checked + .e-info::before {
        border-color: #2196f3;
    }

    .e-radio:checked:focus + .e-info::before, .e-radio:checked + .e-info:hover::before {
        border-color: #0b7dda;
    }

    .e-radio + .e-info:hover::before {
        border-color: #b1afaf
    }

    .e-radio:checked + .e-warning::after { /* csslint allow: adjoining-classes */
        background-color: #ef6c00;
    }

    .e-radio:checked:focus + .e-warning::after, .e-radio:checked + .e-warning:hover::after { /* csslint allow: adjoining-classes */
        background-color: #cc5c00;
    }

    .e-radio:checked + .e-warning::before {
        border-color: #ef6c00;
    }

    .e-radio:checked:focus + .e-warning::before, .e-radio:checked + .e-warning:hover::before {
        border-color: #cc5c00;
    }

    .e-radio + .e-warning:hover::before {
        border-color: #b1afaf
    }

    .e-radio:checked + .e-danger::after { /* csslint allow: adjoining-classes */
        background-color: #d84315;
    }

    .e-radio:checked:focus + .e-danger::after, .e-radio:checked + .e-danger:hover::after { /* csslint allow: adjoining-classes */
        background-color: #ba330a;
    }

    .e-radio:checked + .e-danger::before {
        border-color: #d84315;
    }

    .e-radio:checked:focus + .e-danger::before, .e-radio:checked + .e-danger:hover::before {
        border-color: #ba330a;
    }

    .e-radio + .e-danger:hover::before {
        border-color: #b1afaf
    }
</style>